jQuery multiple loop

I am trying to loop through the list items of several ULs of a SHOWN div.

For example in the snippet below, I want to write a generic jQuery function that will detect the shown div and iterate through list items g, h, i, j, k, l, m, n and o

What is the most efficient way to go about doing this? Thanks in advance!

Example:

<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>
</di开发者_运维技巧v>
<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>

use the :visible selector

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

If I understand you correctly, you want a jQuery function. So, here is how you can do it:

(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);

Here is a demo for you to see it in action