如何使用 for each 或遍历 div？

Question

我构建了自己的 jquery 选项卡内容系统版本。基本标记如下。

<div class="row" id="toShow>
    <div> 
        content
    </div>
    <div> 
        content
    </div>
    <div> 
        content
    </div>
</div>

导航进入另一行

<div class="row" id="Links>
    <ul>
        <li>link</li><li>link</li><li>link</li><li>link</li>
    </ul>
</div>

这是运行标签的js

$('.toShow .dslc-modules-area:not(:first)').addClass("hide"); 

$( ".links li" ).click(function() {
    $( ".links li" ).siblings().removeClass('active');
    $(this).toggleClass('active');
    var identify=$(this).index();
    $(".toShow .dslc-modules-area:not(:eq(identify))").addClass("hide");
    $(".toShow .dslc-modules-area").eq([identify]).removeClass('hide').toggleClass("showme");
    $('html,body').animate({scrollTop: $(".toShow").offset().top + 0}, 800);

如果我在第一个作品上有两个手风琴，并且假设它是一个迭代/每个问题？我的问题是，无需执行链接 1、链接 2 等，有没有办法让代码适用于每组手风琴？也就是说，为每一组#toShow 和#Links 运行这段代码？

Answer 1

这里的主要症结在于，您需要一种方法来区分用于选项卡集 1 和选项卡集 2 的选项卡和内容，以便单击其中一个不会影响另一组。例如，$('.links li') 将匹配两组中的所有链接，因此除非您限制选择器，否则您最终会在选项卡集之间产生串扰。

有很多方法可以解决这个问题。在这里，我将每个选项卡集的元素包装在一个包装器元素中，并修改您的代码以单独作用于每个包装器的内容：

/* Init each tabset separately, using '.find' to limit the subsequent
   selector to act only within that node: */
$('.tabset').find('.toShow div:not(:first)').addClass("hide");
$('.tabset').find('.links li:first').addClass("active");

/* Now attach the event handlers to the links, again separately 
   for each tabset: */
$('.tabset').each(function() {
  var tabset = $(this); // so we don't collide with the 'this' inside the click handler below
  tabset.find(".links li").click(function() {
    tabset.find(".links li").removeClass('active');
    $(this).addClass("active");
    var identify = $(this).index();
    tabset.find(".toShow div:not(:eq(identify))").addClass("hide");
    tabset.find(".toShow div").eq([identify]).removeClass('hide');
  });
});

.hide {
  display: none;
}
.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="tabset">
     <div class="row links">
      <ul>
        <li>link 1</li><li>link 2</li><li>link 3</li>
      </ul>
    </div>
    <div class="row toShow">
      <div>content 1</div><div>content 2</div><div>content 3</div>
    </div>
</span>

<span class="tabset">
    <div class="row links">
      <ul>
        <li>link 1</li><li>link 2</li><li>link 3</li>
      </ul>
    </div>
    <div class="row toShow">
      <div>content 1</div><div>content 2</div><div>content 3</div>
    </div>
</span>

（这可以通过将委托的单击事件绑定到选项卡集节点本身来改进，即 $('.tabset').on('click','.links li', function() {...}); 而不是每个 li 的单个事件，但这不是您要问的问题。）

如果您的 DOM 结构由于某种原因不允许添加该包装器节点，则可以改为依赖文档顺序（例如，将每个 .links 行限制为仅作用于下一个兄弟 .toShow 行）或通过向每对添加数据属性（或类，或其他）（将每个.links[data-tabset="foo"] 限制为仅对也具有data-tabset="foo" 的.toShow 项目起作用）。这是一个仅使用文档顺序的示例：

/* Init is basically the same as the previous snippet: */
$('.toShow').find('div:not(:first)').addClass("hide");
$('.links').find('li:first').addClass("active");

$('.links li').click(function() {
  /* But here we need to traverse the DOM to find the correct sets
     of links and content blocks to act on.  This looks simpler, but
     is more fragile to document order changes, so I'd really recommend 
     the other approach, or an explicit identifier: */
  var linkRow = $(this).closest('.links');
  var showRow = linkRow.next('.toShow');
  var identify = $(this).index();
  
  // The rest is basically as before:
  linkRow.find('li').removeClass('active');
  $(this).addClass('active');

  showRow.find("div:not(:eq(identify))").addClass("hide");
  showRow.find("div").eq([identify]).removeClass("hide");
});

.hide {
  display: none;
}
.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row links">
  <ul>
    <li>link 1</li><li>link 2</li><li>link 3</li>
  </ul>
</div>
<div class="row toShow">
  <div>content 1</div><div>content 2</div><div>content 3</div>
</div>

<div class="row links">
  <ul>
    <li>link 1</li><li>link 2</li><li>link 3</li>
  </ul>
</div>
<div class="row toShow">
  <div>content 1</div><div>content 2</div><div>content 3</div>
</div>

Answer 2

是的，每个函数都有一个jQuery（）：

请参阅文档中的条目： http://api.jquery.com/jquery.each/