Question

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

我想为我的li创建过滤器＆gt;标签。在互联网上找到这个代码基本相同，但使用div＆gt;而且我无法修改它以在li＆gt;

上使用它

这是我的代码。

<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会在标识为<li>的标记之后定位parent标记，而不是在此标记内的其他标记中标记

<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成为身份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');
})

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

1 个答案: