jQuery –同じクラスの1つおきのアイテムにクラスを追加し、中断された場合はリセットします

debugcn 投稿 Dev

ジョン・ザ・ペインター

たぶん何千回も聞かれていると思いますが、何を検索すればいいのかわからないので（見栄えは良かったのですが何も見つかりませんでした）、これが気になります...

私は次の簡単なコンテナ/要素のセットアップを持っています：

<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要素にクラスを追加しました。これは、の2番目の項目にのみ追加する必要があるsmallため、2つのグループであると想定しているため間違っています。

何かご意見は？

アルンPジョニー

試してみてください

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]