如何選擇每個div的第一個孩子

Question

我想選擇幾個div的第一個div。

我

<div class='parent'> 
    <div class='child'>good</div> 
    <div class='child'>bad</div> 
    <div class='child'>nice</div> 
    <div class='child'>fun</div> 
</div> 

<div class='parent'> 
    <div class='child'>test</div> 
    <div class='child'>dead</div> 
    <div class='child'>fly</div> 
    <div class='child'>pipe</div> 
</div> 

<div class='parent'> 
    <div class='child'>weee</div> 
    <div class='child'>jump</div> 
    <div class='child'>run</div> 
    <div class='child'>apple</div> 
</div> 

我想選擇所有家長的div

所以

<div class='child'>good</div> 
<div class='child'>test</div> 
<div class='child'>weee</div> 

將被選中

我已經嘗試的第一個孩子的div：

1 $('.parent .child').first().css('border-top','0'); //only select the first one 

2 $('.parent).each(function(){ 
    $(this).css('border-top','0');//can't find the first child.. 
    }) 

有沒有辦法做到這一點？抱歉，我的大腦現在被炸了。謝謝！

Answer 1

你想...

$(".parent .child:first-child") 

Answer 2

嗯，你可以，如果你喜歡使用jQuery：

$('.parent .child:first-child').css('border-top','0'); 

...但我認爲普通的舊CSS可能是一個更好的主意：

.parent .child:first-child { 
    border-top: 0; 
{ 

Answer 3

你可以使用標準的CSS nth-child選擇器：

$('.child:nth-child(1)') 

這會選擇每個元素的類別爲child，這是其父項的第一個子項。

Answer 4

$(".parent .child:eq(0)")

fiddle here

Answer 5

$('.parent :first-child').css('border-top','0'); 

http://jsfiddle.net/NMH3h/