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