Question

如下所示，我有一个项目列表。

我的目标是隐藏所有id="parent"名为＆gt; =（大于或等于）6的孩子。

如何使用jQuery实现此效果？

<ul id="parent">
   <li id="1"></li>
   <li id="2"></li>
   <li id="3"></li>
   <li id="4"></li>
   <li id="5"></li>
   <li id="6"></li>
   <li id="7"></li>
   <li id="8"></li>
   <li id="9"></li>
   <li id="10"></li>
</ul>

Answer 1

我建议使用简单的CSS，而不是JavaScript：

#parent li {
    display: none;
}

#6,
#6 ~ li {
    display: list-item;
}

我忘记了，虽然从理论上讲上述工作（因为HTML id可以以数字字符开头），但CSS标识符不能以数字字符开头，但它可以如果使用unicode转义，则给出：

#parent li {
    display: none;
}

#\35 ~ li {
    display: list-item;
}

JS Fiddle demo

我发现（比可能有用的时间晚了一点），如果您的id增加1并且他们是编号列表，您只需使用:nth-child()符号：

#parent li {
    display: none;
}

#parent li:nth-child(5) ~ li {
    display: list-item;
}

JS Fiddle demo

Answer 2

在使用仅匹配具有id的元素的属性选择器后，您可以使用filter：

$('[id]').filter(function(){return this.id>=6}).hide();

您可能已经知道id只能被赋予一个元素，这就是为什么我没有测试元素是否在＃parent中，但是如果你愿意的话可以：

$('#parent [id]').filter(function(){return this.id>=6}).hide();

Answer 3

$('#parent').find('li:gt(6)').hide()

Answer 4

您可以使用过滤器函数返回id的比较过滤器。

$('#parent > li').filter(function(){
    var id = this.id || "0";
    return parseInt(id, 10) >= 6;
}).hide();

工作演示：http://jsfiddle.net/jfriend00/dQ2N2/

根据Jquery中的ID隐藏孩子

4 个答案: