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 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/

如何选择每个div的第一个孩子

5 个答案: