Jquery只针对孩子而不是子孩子

Question

如果我有以下标记

<div class='parent'>
  <div class='first'>
    First Child
    <div class='second'>
  Sub-child
    </div>
  </div>
</div>

以下是Jquery

$('.parent').children().css("color","#00b3ff");

结果它改变了两个孩子的颜色,因为我想只选择第一个孩子(不是按类).

Answer 1

这样的事情怎么样:

$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')

通过使用'>',规则将仅应用于直接子项,而不是所有子项(使用.children()时)

你需要做的另一件事是确保孩子不会继承父母的颜色,可以通过明确地给它颜色来完成.

这是JSFIDDLE