jQuery;檢查對象是否有孩子$（this）

Question

我想知道如何以最好的方式看到容器div是否包含子元素。我有一個點擊事件，觸發div id = unread或div id = read的孩子。我想檢查這個孩子在哪裏。

像這樣的事情是我在想什麼：

if ($("#unread").find($(this))) 
    alert("unread"); 
else 
    alert("read"); 

編輯： $（這）是一個後裔#unread或＃閱讀兩個層次。

問候

Answer 1

利用：.children()

if($("#unread").children().length > 0) 
    alert("unread"); 
else 
    alert("read"); 

編輯

if($(event.target).closest('#unread').length > 0) 
    alert('unread'); 
else 
    alert('read'); 

Answer 2

我認爲只是增加.length應該工作：

if ($("#unread").find($(this)).length > 0) 
    alert("unread"); 
else 
    alert("read"); 

Answer 3

轉到backwa從$(this) RDS尋找#unread作爲使用closest祖先：

if($(this).closest('#unread').length > 0) 
    alert('unread'); 
else 
    alert('read'); 

根據您的HTML結構，這將是比搜索的#unread所有的孩子找到this更快。雖然速度差異可能並不重要，但您應該意識到倒退的選擇以及這樣做的可能的好處。

檢查祖先可能是一個更好的匹配你的意圖：你有this在手，你真正想知道的是「它在#unread？」。使用closest返回DOM樹完全符合你所問的問題。

如果由於某種原因，你就開始在#unread並查看其後代就死定了一套，那麼你可以使用find：如果你使用

if($('#unread').find(this)) 
    alert('unread'); 
else 
    alert('read'); 

但是這種做法只會工作至少jQuery的1.6。

Answer 4

使用.closest()或.parents()搜索了從點擊的元素樹：

if ($(this).closest("#unread").length == 1) 
    // etc 

否則，你有興趣在非jQuery的回答呢？鑑於你所說的與click事件股利恰好是兩個級別低於「讀」或「未讀」的div你可能只是這樣做：

if (this.parentNode.parentNode.id === "unread") 
    alert("unread"); 
else 
    alert("read"); 

// or just alert(this.parentNode.parentNode.id); 

Answer 5

我不知道我的最佳途徑可以看到如果一個容器div包含一個子元素。

使用$.contains()，特別是如果性能是一個問題。從文檔：

jQuery。包含（容器，載）

返回：布爾

說明：檢查，看是否有DOM元素是另一個DOM元素的後代。

它比.find()，.children()，或.closest()更高效，正如其他人推薦。但請注意，它只接受DOM元素作爲參數，而不接受jQuery對象（這是其性能更好的一部分）。

在你的情況，你可以在你的單擊事件處理程序做到這一點：

if ($.contains($("#unread")[0], this)) { 
    alert("unread"); 
} else { 
    alert("read"); 
} 

編輯：在反覆思考這件事，它可能更直觀的從點擊的元素向上搜索，而不是下降來自父元素，並且性能通常不會成爲點擊事件處理程序中的關注點。也就是說，我會選擇使用.closest()方法（如@nnnnnn建議和@mu太短），所以我的單擊事件處理程序將包含：

if ($(this).closest("#unread").length > 0) { 
    alert("unread"); 
} else { 
    alert("read"); 
}