jQuery多個循環

Question

我試圖循環顯示div的幾個UL列表項。

例如，在下面的代碼段，我想寫一個通用的jQuery函數，將檢測出的div和通過列表項克迭代，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