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

Но добавил класс shift к элементу после того, как large, что неверно, так как это должно только добавить его ко второму элементу 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>

Answer 2

вы можете попробовать этот код: -

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

Обновление: -

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

Demo

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