Javascript 如何使用jQuery选择第一个孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5852452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select first child with jQuery?
提问by sameold
How do I select the first div in these divs (the one with id=div1) using first child selectors?
如何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>
回答by Roko C. Buljan
Try with: $('.onediv').eq(0)
尝试： $('.onediv').eq(0)
demo jsBin
演示jsBin
From the demo:Other examples of selectorsand methodstargeting the first LIunside an UL:
来自演示：针对第一个unside an的选择器和方法的其他示例：LIUL
.eq()Method:$('li').eq(0):eq()selector:$('li:eq(0)').first()Method$('li').first():firstselector:$('li:first'):first-childselector:$('li:first-child'):lt()selector:$('li:lt(1)'):nth-child()selector:$('li:nth-child(1)')
.eq()方法：$('li').eq(0):eq()选择器：$('li:eq(0)').first()方法$('li').first():first选择器：$('li:first'):first-child选择器：$('li:first-child'):lt()选择器：$('li:lt(1)'):nth-child()选择器：$('li:nth-child(1)')
jQ + JS:
QQ+JS：
you can also use [i]to get the JS HTMLelementindexout of the jQuery el. (array) collection like eg:
您还可以使用从 jQuery el 中[i]获取 JSHTMLelement索引。（数组）集合，例如：
$('li')[0]
now that you have the JS element representation you have to use JS native methods eg:
现在你有了 JS 元素表示，你必须使用 JS 原生方法，例如：
$('li')[0].className = 'active'; // Adds class "active" to the first LI in the DOM
or you can(don't - it's bad design) wrap it back into a jQuery object
或者你可以（不要 - 这是糟糕的设计）将它包装回一个 jQuery 对象
$( $('li')[0] ).addClass('active'); // Don't. Use .eq() instead
回答by Frederik Wordenskjold
$('div.alldivs :first-child');
Or you can just refer to the id directly:
或者你可以直接引用id：
$('#div1');
As suggested, you might be better of using the child selector:
根据建议，您可能最好使用子选择器：
$('div.alldivs > div:first-child')
If you dont haveto use first-child, you could use :firstas also suggested, or $('div.alldivs').children(0).
如果您不必使用first-child，您也可以:first按照建议使用，或者 $('div.alldivs').children(0).
回答by alex
Use the :first-childselector.
使用:first-child选择器。
In your example...
在你的例子中...
$('div.alldivs div:first-child')
This will also match any first child descendents that meet the selection criteria.
这也将匹配符合选择标准的任何第一个子后代。
While
:firstmatches only a single element, the:first-childselector can match more than one: one for each parent. This is equivalent to:nth-child(1).
虽然
:first只匹配单个元素，但:first-child选择器可以匹配多个元素：每个父元素一个。这相当于:nth-child(1).
For the first matched only, use the :firstselector.
对于第一个匹配的唯一，使用:first选择。
Alternatively, Felix Klingsuggested using the direct descendent selectorto get only direct children...
或者，Felix Kling建议使用直接后代选择器只获取直接子代...
$('div.alldivs > div:first-child')
回答by Prabhakar Undurthi
As @Roko mentioned you can do this in multiple ways.
正如@Roko 提到的，您可以通过多种方式做到这一点。
1.Using the jQuery first-child selector - SnoopCode
$(document).ready(function(){
$(".alldivs onediv:first-child").css("background-color","yellow");
}
Using jQuery eq Selector - SnoopCode
$( "body" ).find( "onediv" ).eq(1).addClass( "red" );Using jQuery Id Selector - SnoopCode
$(document).ready(function(){ $("#div1").css("background-color: red;"); });
使用jQuery eq Selector - SnoopCode
$( "body" ).find( "onediv" ).eq(1).addClass( "red" );$(document).ready(function(){ $("#div1").css("background-color: red;"); });
回答by Krishnamoorthy Acharya
Hi we can use default method "first" in jQuery
嗨，我们可以在 jQuery 中使用默认方法“first”
Here some examples:
这里有一些例子：
When you want to add class for first div
当您想为第一个 div 添加类时
$('.alldivs div').first().addClass('active');
When you want to change the remove the "onediv" class and add only to first child
当您想更改删除“onediv”类并仅添加到第一个孩子时
$('.alldivs div').removeClass('onediv').first().addClass('onediv');
