Question

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

我已经尝试删除类条纹背景并将其添加到所有可见项目中，但到目前为止这还不起作用。我觉得nth-child选择器只在完全重新加载DOM时才能工作。

任何想法如何使我的工作？

＆＃13;

$(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');
    });
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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>

希望这会对你有所帮助。

过滤项目并重新排列奇怪的第n个孩子

1 个答案: