10

使用 jQuery，找到父元素的前两个子元素的最有效方法是什么，如果一个是 anh1另一个是 a 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>

Javascript

$('div h1').show();    
$('div p:first-child').show();

编辑我实际上正在使用多个 DIV。我不认为这会有所作为，但看起来我错了。

4

9 回答 9

22

尝试，

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

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

$('div').each (function () {
    $(this).children().slice(0,2).show();
});
于 2012-05-18T20:30:19.560 回答
7

方法的另一种slice()方法：

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

（但我也推荐切片，特别是对于大型收藏品）

于 2012-05-18T20:33:38.970 回答
2

http://jsfiddle.net/94EU7/

$('div :lt(2)').show();
于 2012-05-18T20:33:35.280 回答
1 
$('div').children().slice(0, 2).show();
于 2012-05-18T20:32:49.453 回答
1

您可以使用小于选择器，如下所示

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

工作小提琴

于 2012-05-18T20:32:53.993 回答
1

描述性选择器将是

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

这清楚地表明您的意图是什么以及您正在选择哪些元素。

于 2012-05-18T20:32:59.547 回答
1 
$('div p:first-child,div p:nth-child(2)').show();
于 2012-05-18T20:38:18.413 回答
0

我想你会想要这个eq()功能，像这样：

$("div").children().eq(0); // first child
$("div").children().eq(1); // second child
于 2012-05-18T20:30:58.977 回答
0

不知道为什么需要为此使用 jQuery。

var firstChild = div.firstChild;
firstChild.style.display = 'initial';
firstChild.nextSibling.style.display = 'initial';
于 2012-05-18T20:38:57.553 回答