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')

使用'＆gt;'该规则仅适用于直系儿童，而不是所有儿童（使用.children（）时）

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

这是JSFIDDLE

Answer 2

你不能简单地这样做，css属性由chidlren继承 - 所以如果你将颜色应用到first，它将由second继承，因为它是{I}的继承者first

由于我们无法将样式应用于文本节点，因此可能的解决方案是使用元素包装文本节点并将其样式设置为如下所示

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

演示：Fiddle

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");

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

7 个答案: