jquery - 如何选择子元素？

Question

html

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

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

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

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

Answer 1

You could always change the selector to chain classes together:

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

This will select any children of the .one class which have the class .three

Answer 2

You can also do this:

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

Or of course:

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

Here is a fiddle: http://jsfiddle.net/3nhrh/1/

Answer 3

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

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

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

JSFiddle

Answer 4

试试这个... jsfiddle

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

Answer 5

这完全取决于您想要实现的目标。

如果具有“三”类的项目在您的文档中仅存在一次（或想要全部获取），您可以使用$('.three').

如果您正在寻找任何作为后代的“三”或作为“一”的后代的“二”，请使用$('.one .two .three')

如果您只想在他们是直接孩子的情况下使用相同的内容，则可以使用 $('.one > .two > .three')

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

我希望其中之一满足您的需求，如果没有，那么您应该更好地澄清究竟是什么情况。

Answer 6

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

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

Answer 7

尝试以下行之一：

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

希望它会帮助你。

Answer 8

尝试

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