2

正如您在下面看到的，我有一个项目列表。

我的目标是隐藏所有id="parent"id >=（大于或等于）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>
4

4 回答 4

4

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

#parent li {
    display: none;
}

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

我忘记了，虽然理论上上述方法有效（因为 HTMLid可以以数字字符开头），但 CSS 标识符不能以数字字符开头，但如果您使用 unicode 转义，它可以给出：

#parent li {
    display: none;
}

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

JS 小提琴演示。

我突然想到（比可能有用的稍晚一点）如果你id的 s 增加一并且它们是一个编号列表，你可以简单地使用:nth-child()符号：

#parent li {
    display: none;
}

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

JS 小提琴演示。

于 2013-06-01T17:06:56.017 回答
3

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

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

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

$('#parent [id]').filter(function(){return this.id>=6}).hide();
于 2013-06-01T17:04:06.367 回答
1 
$('#parent').find('li:gt(6)').hide()
于 2013-06-01T17:05:56.217 回答
1

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

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

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

于 2013-06-01T17:08:06.243 回答