Question

以下面的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>

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

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

提前致谢！

Answer 1

你应该可以这样做：

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

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

Answer 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/

Answer 3

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

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

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

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

然后，捎带Tejs：

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

Answer 4

对于李案：

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

其他的：

$('h1:first');

$('h2:first');

$('p:first');

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

4 个答案: