jQuery -添加类与相同的类每第二个项目，然后重置，如果中断

jQuery – add class to every second item with same class then reset if interrupted

本文关键字：然后 项目 中断 如果 第二个 添加 jQuery      更新时间：2023-09-26

我认为这可能已经问了一千次，但我不确定要搜索什么(我有一个很好的看，但找不到任何东西)，所以这就是我想知道的…

我有一个简单的容器/元素设置如下:

<div class="chronology-container">
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-12 large each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
</div>

现在我要做的是向small类项目的每一秒添加一个类。所以理想情况下，我的输出，例如，将是: 

<div class="chronology-container">
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-6 small shift each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
    <div class="col-xs-6 small shift each-chronology"></div>
    <div class="col-xs-12 large each-chronology"></div>
    <div class="col-xs-6 small each-chronology"></div>
</div>

我尝试了一些设置，最有希望的是:

$('.chronology-container .each-chronology:nth-of-type(2n)').addClass('shift');

但是这将类shift添加到large元素之后的元素中，这是错误的，因为它应该只将其添加到small的第二项中，因此假设它们将分为两组。

任何想法吗?

Try

$('.chronology-container .each-chronology.small').not('.small + .small').each(function() {
  $(this).nextUntil(':not(.small)').filter(':even').addClass('shift')
});
.small {
  background-color: lightgrey;
}
.chronology-container > div {
  margin-bottom: 5px;
  min-height: 20px;
}
.chronology-container > .small.shift {
  background-color: lightblue;
}
.chronology-container > .small.shift2 {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="chronology-container">
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-12 large each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-12 large each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
  <div class="col-xs-6 small each-chronology"></div>
</div>

你可以试试下面的代码:-

$('.chronology-container .each-chronology.small:nth-child(2n+1)').addClass('shift');

更新:

$('.chronology-container .each-chronology.small:even:not(:first)').addClass('shift');
演示

您的解决方案几乎是正确的，只是您使用了错误的类来标识元素。类each-chronology对于大元素也很常见。不使用each-chronology，使用small作为类选择器。

尝试使用以下解决方案:

$('.chronology-container .small:nth-of-type(2n)').addClass('shift');

** OR **

$('.chronology-container .small.each-chronology:nth-child(2n)').addClass('shift');
相关文章：