2011-04-21 110 views
17

我有了類似於下面一節的表:的jQuery:兒童()與孩子選擇「>」

<tr> 
    <td> <span class="myclass"></span> 
    </td> 
<tr> 

我的$(本)被設置爲TR元素,我想訪問具有「myclass」類集的Span元素。 以下似乎工作:

if ($(this).children('td').children('span').is('.myclass')){ 
    alert('in here'); 
} 

而是試圖用這個當:

if ($(this).children("td > span").is('.myclass')){ 

或本:

if ($(this).children("td span").is('.myclass')){ 

事實並非如此。我認爲以上兩種中的任何一種都會得出類似的結果(雖然通過不同的方法),但顯然不是。

我在這裏錯過了什麼?

謝謝!

回答

19

children(selector)只會匹配那些匹配selector的孩子。沒有tr的孩子(td s)可以匹配td > span,因爲tr已經沒有span子元素,只有td s和td > span !== td

documentation也是關於這很清楚:

獲取每個元素的子元素集合中的匹配元素,任選地通過一個選擇器過濾的。


什麼你可能想的反而是.find()

$(this).find("td > span") 

它返回所有後代,不只是孩子,選擇匹配。

0

我解釋了這個here

區別在於第一個選擇器完全在children調用中,而第二個選擇器不是。

因此,第一個尋找所有this的孩子,這些孩子也匹配td > span。 (換句話說,(選擇所有{<td>小號<span>的孩子}),其本身是this直接孩子)

第二個將找到的this所有<td>孩子,那麼發現所有的<span> s在那些<td> s。

1

來自jQuery文檔:

「The .find()and。兒童()方法是相似的,但後者只是行進的單級下調DOM樹「

我推薦使用這樣的:

if ($(this).find('.myclass').length){ 
    alert('in here'); 
} 

乾杯