javascript - すべての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を選択したい

それで

 <div class='child'>good</div>
 <div class='child'>test</div>
 <div class='child'>weee</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のn番目の子セレクターを使用できます。

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

childこれにより、親の最初の子であるクラスを持つすべての要素が選択されます。

Answer 4

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

http://jsfiddle.net/NMH3h/

Answer 5

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

ここでフィドル