項目をフィルタリングし、奇数番目の子供を並べ替えます。

Question

うまく動作するリストのフィルタがあります。ボタンをクリックすると、正しいリストアイテムが表示されます。 私のリストアイテムは、:nth-child(odd)というCSSでスタイルされているので、2番目ごとのリストアイテムは背景を取得しています。これはこれまでのところうまく動作します。正しく動作しないのは、すべての奇妙な項目のn番目の子セレクタです。たとえば、3番目のボタンをクリックすると背景のスタイルが間違っています。

私は既にクラスのストライプバックグラウンドを削除してすべての表示可能なアイテムに追加しようとしましたが、これまでのところ動作しません。私は、DOMが完全に再読み込みされたときにのみ、nth-childセレクターが動作していると感じます。

どのように私はこの作品を作ることができますか？ここで

$(document).ready(function() { 
 
    $("button[data-filter]").click(function (e) { 
 
    $("button[data-filter]").removeClass('active-filter'); 
 
    $(this).addClass('active-filter'); 
 
    $('li.element-item').fadeOut(150); 
 
    var filterClass = $(this).attr("data-filter"); 
 
    var elements = $('li.element-item'); 
 
    //elements.removeClass('striped-background'); 
 

 
    if (filterClass == '*') { 
 
     $(elements).fadeIn(450); 
 
     //elements.addClass('striped-background'); 
 
    } else { 
 
     $('li.element-item'+filterClass).fadeIn(450); 
 
     $(elements).not($('li.element-item'+filterClass)).hide(); 
 
    } 
 
    $(this).ready(function() { 
 
     //$('li.element-item:visible').addClass('striped-background'); 
 
    }); 
 
    }); 
 
});

.striped-background:nth-child(odd) { 
 
    background: #bcd5fa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<section class="filters-button-group"> 
 
    <button class="button is-checked" data-filter="*">All</button> 
 
    <button data-filter=".344" class="button">First</button> 
 
    <button data-filter=".345" class="button">Second</button> 
 
    <button data-filter=".348" class="button">Third</button> 
 
    <button data-filter=".374" class="button">Fourth</button> 
 
    <button data-filter=".375" class="button">Fifth</button> 
 
</section> 
 

 
<ul class="download schlauBuch"> 
 
    <li class="element-item active 344 striped-background"> 
 
    <p class="first"> 
 
     First 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 344 striped-background"> 
 
    <p class="first"> 
 
     First 2 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 345 striped-background"> 
 
    <p class="first"> 
 
     Second 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 2 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 3 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 4 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 5 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 374 striped-background"> 
 
    <p class="first"> 
 
     Fourth 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 375 striped-background"> 
 
    <p class="first"> 
 
     Fifth 
 
    </p> 
 
    </li> 
 
</ul>

Answer 1

あなたが解決

$(document).ready(function() { 
 
    $("button[data-filter]").click(function (e) { 
 
    var flag = 0; 
 
    $("button[data-filter]").removeClass('active-filter'); 
 
    $(this).addClass('active-filter'); 
 
    $('li.element-item').fadeOut(150); 
 
    var filterClass = $(this).attr("data-filter"); 
 
    var elements = $('li.element-item'); 
 
    //elements.removeClass('striped-background'); 
 

 
    if (filterClass == '*') { 
 
     $(elements).fadeIn(450); 
 
     //elements.addClass('striped-background'); 
 
    } else { 
 
     $('li.element-item'+filterClass).fadeIn(450); 
 
     $(elements).not($('li.element-item'+filterClass)).hide(); 
 
    } 
 
    setTimeout(function(){ 
 
     $("li").each(function(){ 
 
     if($(this).css('display') != 'none'){ 
 
      if(flag%2 == 0) { 
 
      $(this).addClass('secondEle'); 
 
      }else { 
 
      $(this).removeClass('secondEle'); 
 
      } 
 
      flag++; 
 
     } else { 
 
      $(this).removeClass('secondEle'); 
 
     } 
 
     }); 
 
    },450); 
 
    }); 
 
    $('button[data-filter="*"]').trigger('click'); 
 
});

.secondEle { 
 
    background: #bcd5fa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<section class="filters-button-group"> 
 
    <button class="button is-checked" data-filter="*">All</button> 
 
    <button data-filter=".344" class="button">First</button> 
 
    <button data-filter=".345" class="button">Second</button> 
 
    <button data-filter=".348" class="button">Third</button> 
 
    <button data-filter=".374" class="button">Fourth</button> 
 
    <button data-filter=".375" class="button">Fifth</button> 
 
</section> 
 

 
<ul class="download schlauBuch"> 
 
    <li class="element-item active 344 striped-background"> 
 
    <p class="first"> 
 
     First 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 344 striped-background"> 
 
    <p class="first"> 
 
     First 2 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 345 striped-background"> 
 
    <p class="first"> 
 
     Second 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 2 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 3 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 4 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 348 striped-background"> 
 
    <p class="first"> 
 
     Third 5 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 374 striped-background"> 
 
    <p class="first"> 
 
     Fourth 
 
    </p> 
 
    </li> 
 
    <li class="element-item active 375 striped-background"> 
 
    <p class="first"> 
 
     Fifth 
 
    </p> 
 
    </li> 
 
</ul>

これはあなたを助けることを願って行きます。