Question

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

＆＃13;

<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>

＆＃13;

目标是将每个列表中活动元素的数量限制为1.但是，当我使用普通的.each（）循环遍历元素时，它会同时运行所有列表并限制每个列表的总数为1而不是1。到目前为止，代码相当简单，因为我没有解决这个问题。

＆＃13;

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

＆＃13;

我很好奇基本的任务是循环遍历每个列表并完成任务，而不是一次循环遍历所有列表。我宁愿不为每个可能的列表创建单独的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')... });。你必须做这样的事情：

pod 'Firebase/Core'
pod 'Firebase/Auth'
pod 'Firebase/Firestore'

Answer 4

你的代码说＆＃34;找到所有名为class的元素。然后循环遍历<li>现在的＃34;。

尝试类似：

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

Answer 5

因为每个div都有类＆＃34; .class＆＃34;包含一个带有li元素的ul，你想在其中只有一个设置为活动状态，你需要在你的div上使用.each（）并在每个div的li元素上有一个内部.each（）。

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

Answer 6

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

＆＃13;

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

＆＃13;

.active {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 7

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

Jquery - 一次一个地循环通过兄弟元素

7 个答案: