jQuery + 如何只选择每个元素的第一个实例？答案

【问题标题】：jQuery + How can I select only the first instance of each element?jQuery + 如何只选择每个元素的第一个实例？
【发布时间】：2011-11-07 04:13:03
【问题描述】：

以下面的html为例：

<h1>Level 1 Header</h1>
<h1>My Second Level 1 Header</h1>
<h1>And a third for kicks</h1>

<h2>Level 2 Header</h2>
<h2>2nd Level 2 Header</h2>

<p>Here is a paragraph.</p>
<p>Here is a paragraph number 2.</p>
<p>And paragraph number 3.</p>

<ul>
<li>list item 1<li>
<li>list item 2<li>
<li>list item 3<li>
<li>list item 4<li>
</ul>

如何只选择每个元素的第一个实例？

我希望隐藏所有元素，每个元素的“第一个”除外。

提前致谢！

【问题讨论】：

标签： javascript jquery filter

【解决方案1】：

你应该可以做这样的事情：

 $('h1:first,h2:first,p:first,li:first')

将每个集合的第一个元素选择到一个 jQuery 集合中。

【讨论】：

太好了，谢谢。我希望几乎有一个我可以写的函数说： 1 - 我们在这个容器中有哪些/多少元素？ 2 - 现在我们知道有 x 个元素，从选择中过滤每个第一个实例。我在这个答案中看到的问题，我可以很长一段时间作为一个表达式，我想也许有一种方法可以让脚本检查文档中的内容，而不是我指定每个。感谢您的回复！

【解决方案2】：

为了获得最佳性能，请避免使用非标准选择器，因为它们会强制 Sizzle 选择器引擎进入较慢的非 querySelectorAll 代码分支。可以在此处找到非标准选择器的示例：http://api.jquery.com/category/selectors/（查找以“：”开头的任何选择器）

考虑到这一点，您可以将策略应用于您的用例，如下所示：

$("h1").hide().eq(0).show();

$("h2").hide().eq(0).show();

$("p").hide().eq(0).show();

$("ul li").hide().eq(0).show();

为了获得额外的性能改进，请将 hide()/show() 替换为 addClass()/removeClass()，以添加和删除定义 display 状态更改的类。

要获得更多性能改进，请随时随地使用 :first-child：http://www.w3.org/TR/CSS2/selector.html#first-child

现场示例：http://jsfiddle.net/rwaldron/w4Wz4/

【讨论】：

【解决方案3】：

我不知道如何隐式执行此操作，但显式选择第一个元素非常容易：

$("h1:first").show();

隐藏除第一个以外的所有内容：

$("h1:gt(0)").hide();

并且，搭载 Tejs：

 $("h1:gt(0),h2:gt(0),p:gt(0),li:gt(0)")

【讨论】：

【解决方案4】：

对于 li 情况：

// hide all li and then show the first one
$('ul li').hide().filter(':lt(1)').show();

其他的：

$('h1:first');

$('h2:first');

$('p:first');

【讨论】：