JQuery множественный цикл

Question

Я пытаюсь перебрать элементы списка нескольких UL SHOWN div.

Например, в приведенном ниже фрагменте кода я хочу написать общую функцию jQuery, которая будет обнаруживать показанный элемент div и перебирать элементы списка g, h, i, j, k, l, m, n и o

Какой самый эффективный способ сделать это? Заранее спасибо!

Пример:

<style>
#zlt-1 {display:none;}
</style>

    <div id="zlt-1" >
    <ul class="jgrid12 first layoutFrame">
        <li>example a</li>
        <li>example b</li>
        <li>example c</li>
    </ul>
    <ul class="jgrid12 first layoutFrame">
        <li>example d</li>
        <li>example e</li>
        <li>example f</li>
    </ul>
</div>
<div id="zlt-2" >
    <ul class="jgrid12 first layoutFrame">
        <li>example g</li>
        <li>example h</li>
        <li>example i</li>
    </ul>
    <ul class="jgrid4 first layoutFrame">
        <li>example j</li>
        <li>example k</li>
        <li>example l</li>
    </ul>
    <ul class="jgrid8 layoutFrame">
        <li>example m</li>
        <li>example n</li>
        <li>example o</li>
    </ul>
</div>

Answer 1

используйте селектор :visible

$('div:visible li').each(function(){
    // do something
});

Answer 2

Если я вас правильно понимаю, вам нужна функция jQuery. Итак, вот как вы можете это сделать:

(function($){
    // define your function here
    $.fn.listIterator = function(){
        return this.each(function(){
            $(this)
                .find('ul li')
                .each(function(){
                    // do whatever you like here with list items
                });
        });
    }

    $(document).ready(function(){
        // use the function like this
        $('div:visible').listIterator();
    });
})(jQuery);

Вот демонстрация для вас, чтобы увидеть его в действии