Jquery - 一次一個地循環通過兄弟元素

Question

我試圖一次一個地循環一些兄弟元素，並且我無法將進程與僅立即運行所有匹配元素分開。 這必須是動態的，因為項目列表會有所不同，並且不會總是相同的大小。 以下示例：

 <div class="class"> <ul> <li class="active"></li> <li></li> <li></li> </ul> </div> <div class="class"> <ul> <li class="active"></li> <li></li> <li></li> </ul> </div> <div class="class"> <ul> <li class="active"></li> <li></li> <li></li> </ul> </div> 

目標是將每個列表中活動元素的數量限制為1.但是，當我使用正常的.each（）循環遍歷元素時，它會同時運行所有列表並將總量限制為每個列表1而不是1。 到目前為止代碼相當簡單，因為我沒有解決這個問題的方法。

 $('.class').find('li').each(function() { // do something }); 

我很好奇基本的任務是循環遍歷每個列表並完成任務，而不是一次循環遍歷所有列表。 我寧願不為每個可能的列表創建單獨的jQuery調用，並且更喜歡單個調用來處理任務。 任何幫助或想法將不勝感激，我可能正在尋找一個簡單的解決方案。

Answer 1

使用嵌套循環，每個列表一個循環，然后遍歷該列表中的項目。

$(".class ul").each(function() {
    var active_count = 0;
    $(this).find("li").each(function() {
        // do something
    });
});

Answer 2

循環你的.class比：

$('.class').each(function() {

   var $li = $(this).find('li');
   // $li is now a collection of n LI elements inside the current .class

   $li.each(function () {
       // you can use $(this) at this point
   });

});

Answer 3

這就是jQuery的.find工作原理，首先你搜索匹配.class元素，然后在所有這些搜索li 。 你必須做這樣的事情：

$('.class').each(function () {
   $(this).find('li')... 
});

Answer 4

你的代碼說“找到所有名為class的元素。然后遍歷<li> s present”。

嘗試類似的東西：

$('.class').each(function(){
     $(this).find(li).each ...
}

Answer 5

由於每個帶有“.class”類的div都包含一個帶有li元素的ul，你想在其中只有一個設置為活動狀態，你需要在你的div上使用.each（）並在你的li元素上有一個內部.each（）為每個div。

    $('.class').each(function(i, ele){ 
        $(ele).find('li').each( function(i, ele) {} ); });

Answer 6

此代碼段單獨處理每個列表，並存儲第一個活動項。 從每個li中刪除活動，然后將原始的第一個活動元素設置為活動。 如果此列表中沒有活動項，它還會將第一個列表項設置為活動狀態。

 $('.class').find('ul').each(function() { let firstActiveLink = $(this).children('li.active:first'); $(this).children('li').removeClass('active'); if (firstActiveLink.length) { firstActiveLink.addClass('active'); } else { $(this).children('li:first-child()').addClass('active'); } }); 

 .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="class"> <ul> <li class="active"></li> <li class="active"></li> <li class="active"></li> </ul> <ul> <li></li> <li></li> <li></li> </ul> <ul> <li></li> <li class="active"></li> <li class="active"></li> <li></li> </ul> <ul> <li class="active"></li> <li></li> <li class="active"></li> <li></li> </ul> </div> 

Answer 7

謝謝你的幫助！ 我最終通過添加數據字段並遞增該字段來解決我的問題。 使用一個簡單的小於if語句來查看元素是否具有更多與之關聯的正確數量的li。 如果有人遇到類似情況，請告訴我您是否要查看代碼。