如何用jQuery选择第一个孩子？

Question

如何id=div1使用第一个子选择器选择这些div中的第一个div(带有)？

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>

Answer 1

试试: $('.onediv').eq(0)

演示jsBin

来自演示:针对第一个未知的选择器和方法的其他示例:LIUL

.eq()方法:$('li').eq(0)
:eq()selector:$('li:eq(0)')
.first()方法$('li').first()
:first选择器:$('li:first')
:first-childselector:$('li:first-child')
:lt()selector:$('li:lt(1)')
:nth-child()selector:$('li:nth-child(1)')

jQ + JS:

Array.slice() 方法: $('li').slice(0,1)

你也可以[i]用来从jQuery el中获取JS HTMLelement 索引.(数组)集合,例如:

$('li')[0]

既然你有JS元素表示,你必须使用JS本机方法,例如:

$('li')[0].className = 'active'; // Adds class "active" to the first LI in the DOM

或者你可以(不要 - 这是糟糕的设计)将它包装回jQuery对象

$( $('li')[0] ).addClass('active'); // Don't. Use .eq() instead

Answer 2

$('div.alldivs :first-child');

或者你可以直接引用id:

$('#div1');

如建议的那样,您最好使用子选择器:

$('div.alldivs > div:first-child')

如果你不必使用first-child,你可以使用:first,也建议,或 $('div.alldivs').children(0).

Answer 3

使用:first-child选择器.

在你的例子中......

$('div.alldivs div:first-child')

这也将匹配符合选择标准的任何第一个孩子后代.

虽然:first匹配只有一个元素,但:first-child选择器可以匹配多个:每个父元素一个.这相当于:nth-child(1).

对于第一个匹配的唯一,使用:first选择.

或者,Felix Kling建议使用直接后代选择器来获得直接的孩子......

$('div.alldivs > div:first-child')