选择HTML元素

Question

如果我有：

<div id="foo"> 
    Hello! 
    <div class="bar"> 
    </bar> 
</div> 

和：

var some = $("#foo"); 

一种方式来选择的.bar DIV中#foo是：

$(some.attr('id') + ' .bar') 

但这很脏。有没有一种干净的方式来选择.bar div里面一些？

Answer 1

需要使用.find()

获取每个元素的后代在当前匹配的元素集合，由一个选择器，jQuery对象，或元件的过滤。

代码

$("#foo").find('.bar'); // some.find('.bar'); 

OR

您还可以使用.children()

获取每个元素的孩子在匹配的元素，任意被选择过滤。

$("#foo").children('.bar'); // some.children('.bar'); 

注：.children()方法之处在于.children().find()不同之处仅行进单个电平向下DOM树而.find()可以向下遍历多个级别来选择后代元素（孙子，等）为好。

Answer 2

尝试这种情况：

var bar = $('#foo .bar'); 

这将选择具有bar类是#foo元件的内部元件。

文档：https://api.jquery.com/descendant-selector/

或者

var bar = some.find('.bar'); 

这将搜索具有bar类的所有元素的some即#foo内部。

文档：https://api.jquery.com/find/

Answer 3

这是很简单的事：

var some = $("#foo"); 

some.find(".bar");