檢查是否有祖先有一個類使用jQuery

105

有沒有什麼辦法在jQuery檢查是否任何父母，祖父母，曾祖父母有一個類。檢查是否有祖先有一個類使用jQuery

我已經離開我的代碼做這樣的事情一個標記結構：

$(elem).parent().parent().parent().parent().hasClass('left')

然而，對於代碼的可讀性，我想避免這樣的事情。有沒有辦法說「任何父母/祖父母/曾祖父擁有這個班級」？

我正在使用jQuery 1.7.2。

來源

2013-06-13 crmpicco

214

if ($elem.parents('.left').length) { 

}

來源

2013-06-13 10:32:45 Alex

+11

謝謝，正是我所需要的！爲了記錄，儘管將'.length'作爲真值的做法在JS中相當豐富，但它理解得更加清晰和容易。'length> 0' – dooleyo

這裏是jQuery [.parents（）]的鏈接（ https://api.jquery.com/parents/）文檔 –

您可以使用parents法規定.class選擇，並檢查其中是否與它匹配：

if ($elem.parents('.left').length != 0) { 
    //someone has this class 
}

來源

2013-06-13 10:33:04

有許多方法可讓元素的祖先進行過濾。

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/} 
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/} 
if ($elem.parents().hasClass('parentClass')) {/*...*/} 
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/} 
if ($elem.is('.parentClass *')) {/*...*/}

當心，closest()方法包括元件本身，同時檢查選擇器。

或者，如果你有一個唯一選擇匹配$elem，如#myElem，你可以使用：

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/} 
if(document.querySelector('.parentClass #myElem')) {/*...*/}

如果你想匹配取決於它的任何祖先類的只有造型目的的元素，只需使用一個CSS規則：

.parentClass #myElem { /* CSS property set */ }

來源

2013-06-13 10:35:35

我可能冒昧地說（沒有測試這個），這種方法更好。 Elem.parents將遍歷整個父級結構體，其中最接近（）應該（可能）在找到與該元素最近的父級之後停止，因此更有效。這是一個沒有教養的猜測。我通常使用最接近的（）。聽起來像我發現了一個新的話題來研究我的博客！：P – dudewad

@dudewad是的，但它是相當新的。我的意思是在較早的jq版本AFAIK中，情況並非如此。父母循環在使用最接近的（）的第一個匹配的父親時沒有中斷，但是現在它是。（不知道從哪個jq版本，但我很肯定在這個聲明是正確的） –

很高興知道，感謝您的信息。奇怪的是，他們不會從第一個版本開始創建。 – dudewad

檢查是否有祖先有一個類使用jQuery

回答

相關問題