使用jquery为表中的li创建过滤器

Question

我对javascript不太熟悉，对你们大多数人来说，这很容易，但是.

我想为我的li>标签创建过滤器。在互联网上找到这段代码，它基本上是相同的，但是使用div>，我无法修改它，以便在li>上使用它

这是我的密码。

<button class="active button" id="all">Show All</button>
<button class="button" id="a">Show A</button>
<button class="button" id="b">Show B</button>
<button class="button" id="c">Show C</button>
<button class="button" id="d">Show D</button>

<div id="parent">
  <ul class="rig columns-3">
    <li class="a">
      <img src="image_1.jpg" />
    </li>
    <li class="b">
      <img src="image_1.jpg" />
    </li>
  </ul>
</div>

我用的剧本是：

var $btns = $('.button').click(function() {
  if (this.id == 'all') {
    $('#parent > li').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > li').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
}) 

有人能帮帮我吗？我非常相信:-)

Answer 1

{element a} > {element b}是直接子级的选择器。这意味着，在这种情况下，#parent > li将在带有id parent的标记之后锁定<li>标记，而不是像下面这样在另一个标记内的标记。

<div id="parent">
    <li>
    <--!This will be selected>
    <li>
    <div class="child">
        <li>
        <--!This will not be selected>
        </li>    
    </div>
</div>

在您的例子中，您可以使用#parent > ul > li或只使用#parent li --这不需要li成为id parent标记的第一个子级

在这种情况下，您的脚本应该如下所示

var $btns = $('.button').click(function() {
  if (this.id == 'all') {
    $('#parent > ul > li').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > ul> li').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})