Question

HTML

<div class="one">
    <div class="two">
        <div class="three">text</div>
    </div>
</div>

如何选择子元素。我试过这个。

$('.one').children('.three').css('color','#f00');

我知道.find（）函数，但想知道另一种方法。

Answer 1

您可以随时将选择器更改为链类：

$(".one .three").css("color", "#f00");

这将选择具有班级.one

的.three班级的所有孩子

Answer 2

你也可以这样做：

$('.one > .two').children('.three').css('color','#f00');

当然还是：

$('.one > .two > .three').css('color','#f00');

这是一个小提琴：http://jsfiddle.net/3nhrh/1/

Answer 3

以下方法可能会对您有所帮助：

var children=$('.one').children();

children.each(function(idx, val){
   $(this).css('color','#f00');
});

JSFiddle

Answer 4

尝试其中一行：

$('.one').children().children('.three').css('color','#f00');
$('.one').children('.two').children('.three').css('color','#f00');
$('.one').children('.two').find('.three').css('color','#f00');

希望它会对你有所帮助。

Answer 5

您可以使用上下文选择器：

$('.three', $('#one')).css(.....

Answer 6

尝试

$('.one > div.three').css('color','#f00');

Answer 7

试试这个... jsfiddle

$("div").children(".two").css("color", "blue");

Answer 8

这完全取决于你想要达到的目的。

如果文章中包含“3”类的项目只存在一次（或想要获得所有项目），则可以使用$('.three')。

如果您正在寻找作为后代的“三个”或作为“一个”的后代的“两个”使用$('.one .two .three')

如果您只希望他们是直接孩子，可以使用$('.one > .two > .three')

如果你碰巧已经有一个“one”节点的jquery对象，你可以限制以前的搜索： $('.three' , theOne)，$(' .two .three' , theOne)或$(' > .two > .three', theOne)

我希望其中一个符合您的需求，如果没有，那么您应该更好地澄清具体情况。

如何选择儿童元素？

8 个答案: