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

Answer 2

你不能简单地那样做，CSS属性由chidlren继承-所以，如果你申请一个颜色first它会通过继承获得second ，因为它是一个继承人first

由于我们无法将样式应用于文本节点，因此可能的解决方案是使用元素包装文本节点并按照下面给出的样式对其进行样式设置

$('.parent > div').contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text()).length > 0;
}).wrap('<span />').parent().css('color', '#00b3ff');

演示： 小提琴

Answer 3

DEMO

var sel = $('.parent').children();
var old_color = sel.css('color');
sel.css('color', '#00b3ff');
sel.children().css('color', old_color);

Answer 4

没有人发布它，所以，只使用CSS：

DEMO

.parent > div{
    color:#00b3ff;
}
.parent div div {
    color:black;
}

Answer 5

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

Answer 6

    $(".parent > div:eq(0)").css("color","#00b3ff");
    $(".parent > div:first").css("color","#00b3ff");

Answer 7

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