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。 如果有人遇到类似情况，请告诉我您是否要查看代码。