jquery - 根据 Jquery 中的 ID 隐藏 child

Question

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

我的目标是隐藏 id="parent" 的所有 id >=(大于或等于)6 的 child 。

如何使用 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 递增一个并且它们是一个编号列表，你可以简单地使用 :nth- child() 符号:

#parent li {
    display: none;
}

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

JS Fiddle demo .