Javascript jQuery：查找前两个子项

使用jQuery，如果一个是

h1

，另一个是

p

，那么找到父元素的前两个子元素的最有效方法是什么。我的代码现在不起作用，我希望使用最佳实践来实现这一点

CSS

div > *{
    display: none;
}

HTML

<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

编辑我实际上正在处理多个div。我不认为这会有什么不同，但看起来我错了。

试试看

$('div').children().slice(0,2).show();

如果您有超过1个div，请尝试以下操作

$('div').each (function () {
    $(this).children().slice(0,2).show();
});

---

我想您需要

eq（）

函数，如下所示：

$("div").children().eq(0); // first child
$("div").children().eq(1); // second child

您可以像下面这样使用选择器

$('div > *:lt(2)').show();

---

一个描述性选择器

$('div').find('h1:first, p:first').show(); 

这就清楚了你的意图是什么，你选择了什么元素

---

slice（）

方法的另一种方法：

$('div').children(':lt(2)').show()

---

（但我也推荐slice，尤其是对于大型集合）

不确定为什么需要使用jQuery来实现这一点

var firstChild = div.firstChild;
firstChild.style.display = 'initial';
firstChild.nextSibling.style.display = 'initial';

---

啊哈，是的，对。嗯，你每天都会学到新东西，有时一天不止一件事@colindunnn必须使用

。如果有多个div，则每个
。请参阅我的编辑。此选择器将在不使用每个
$（'div'）的情况下工作。查找（'h1:first，p:first'）。show（）
@Interstellar\u Coder Smart。天哪，我喜欢StackOverflow。@星际编码器我不确定，但我更喜欢保持我的jQuery函数调用最小化。。可能只有我一个人。如果你实际上不需要使用jQuery，你可以使用这个CSS规则：
div>h1:first child，div>h1:first child+p{display:block；}
。另外，我同意Interstarr_编码器。如果您真的想要第一个h1和第一个p，而不仅仅是前两个孩子，那么您应该使用他的方法，因为这样可以更清楚地了解您的期望。您的意思是
.style.display='none'
？
$('div :lt(2)').show();    

$('div').children(':lt(2)').show()

$('div p:first-child,div p:nth-child(2)').show();

var firstChild = div.firstChild;
firstChild.style.display = 'initial';
firstChild.nextSibling.style.display = 'initial';