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

但是这会在shift元素之后的元素中添加一个类large，这是错误的，因为它应该只将它添加到small的第二项中，所以假设它们将是两个小组。

有什么想法吗？

Answer 1

您可以尝试以下代码： -

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

更新： -

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

Demo

Answer 2

尝试

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

Answer 3

您的解决方案几乎是正确的，除了您使用错误的类来识别元素。类each-chronology也是大元素的共同点。不使用each-chronology，而是使用small作为类选择器。

尝试使用以下解决方案：

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

**或**

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

jQuery - 为具有相同类的每个第二项添加类，然后在中断时重置

3 个答案: