jQuery多循环

Question

我正在尝试遍历SHOWN div的几个UL的列表项。

例如在下面的代码片段中，我想编写一个通用的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);

Here is a demo for you to see it in action