筛选项目并重新排列奇数第 n 个孩子

Question

我有一个列表过滤器，可以正常工作。当我单击一个按钮时，将显示右侧列表项。我的列表项由带有:nth-child(odd)的 css 设置样式，因此每隔一个列表项就会获得背景。到目前为止，这也工作正常。不起作用的是每个奇数项的第 n 个子选择器。例如，当我单击第三个按钮时，背景样式是错误的。

我已经尝试删除类条纹背景并将其添加到所有可见项目中，但到目前为止这不起作用。我觉得第 n 个子选择器仅在 DOM 完全重新加载时才有效。

任何想法如何使这项工作？

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

希望这对您有所帮助。