javascript - jQuery – 将类添加到具有相同类的第二个元素，然后在中断时重置

Question

我想这可能已经被问过一千次了，但我不确定要搜索什么(我仔细看了看，但找不到任何东西)所以这就是我想知道的......

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

<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');

但这在 large 元素之后的元素中添加了类 shift，这是错误的，因为它应该只将它添加到 small 的第二项 所以假设他们将分成两部分。

有什么想法吗？

Answer 1

尝试

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