Jquery - 一次循环遍历兄弟元素答案

【问题标题】：Jquery - Looping through sibling elements one at at timeJquery - 一次循环遍历兄弟元素
【发布时间】：2018-06-29 04:44:40
【问题描述】：

我试图一次循环遍历一些同级元素，但我无法将进程与一次遍历所有匹配元素分开。这必须是动态的，因为项目列表会有所不同，并且不会总是相同的大小。以下示例：

<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 调用，而是更喜欢一个调用来处理任务。任何帮助或想法将不胜感激，我可能正在寻找一个简单的解决方案。

【问题讨论】：

标签： javascript jquery loops each

【解决方案1】：

循环你的.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
   });

});

【讨论】：

【解决方案2】：

这就是 jQuery 的 .find 的工作原理，首先你搜索匹配 .class 的元素，然后在所有这些元素中搜索 li。你必须这样做：

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

【讨论】：

【解决方案3】：

使用嵌套循环，每个列表一个，然后遍历该列表中的项目。

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

【讨论】：

你激发了一些深夜函数链来删除每个组中除第一个活动类之外的所有类。 $(".class").each((el) => $(el).find("li.active").filter((i) => i>0).removeClass("active"));因为我正在手机上编码，所以我无法尝试。

【解决方案4】：

您的代码是说“找到所有名为 class 的元素。然后循环遍历存在的 <li>s”。

尝试类似：

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

【讨论】：

【解决方案5】：

由于每个具有“.class”类的 div 都包含一个带有 li 元素的 ul，您希望在其中只设置一组为活动的，因此您需要在 div 上使用 .each() 并在内部使用 .each()每个 div 的 li 元素。

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

【讨论】：

【解决方案6】：

这个 sn-p 单独处理每个列表，并存储第一个活动项目。从每个 li 中删除 active，然后将原始的第一个 active 元素设置为 active。如果此列表中没有项目处于活动状态，它还会将第一个列表项目设置为活动状态。

$('.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>

【讨论】：

【解决方案7】：

感谢大家的帮助！我最终通过添加一个数据字段并增加该字段来解决我的问题。使用一个简单的小于 if 语句来查看元素是否有更多的 li 与其关联的正确数量。如果有人遇到类似情况，请告诉我您是否想查看代码。

【讨论】：