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调用，而希望使用一个单一的调用来处理任务。如果有帮助或想法，将不胜感激。也许我正在寻找一个简单的解决方案。

- Corey Sizemore

Answer 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
   });

});

- Roko C. Buljan

Answer 2

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

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

- Barmar

---

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

Answer 3

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

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

- klh

Answer 4

你的代码的意思是“查找所有名为class的元素。然后循环遍历存在的

元素”。

尝试使用以下内容：

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

- gwalshington

Answer 5

由于每个类为“.class”的div都包含一个ul，其中li元素中只有一个需要设置为活动状态，因此您需要在div上进行.each()操作，并对每个div的li元素进行内部.each()操作。

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

- Ryan Wilson

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>

- JasonB

Answer 7

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

- Corey Sizemore