2009-08-20 42 views
3

我有點困惑於如何正確選擇父項,即2 DIV的。jQuery Select 2 Divs Up

換句話說,我的HTML看起來像這樣:

<div>Folder</div> 
<div class="file_info"> 
    <a href="test.jpg">Test File</a> 
</div> 

這裏是我當前的jQuery:$("a[href$='.jpg']").addClass("Image");

不過,我不希望給類添加到<a>,相反,我想將該類添加到上面的'文件夾'2 DIV中。

這樣做的最好方法是什麼?

謝謝!

回答

4

這將工作:

$("a[href$='.jpg']").parent().prev().addClass("Image"); 

首先,它導航到所選元素的父元素,然後該元素之前最近的兄弟姐妹,從而達到您所需要的div元素。

有關更多詳細信息,請參閱有關parentprev的文檔。

1
$("a[href$='.jpg']").parent().parent().addClass('Image'); 
4

鑑於jQuery的魯棒性,有幾乎總是做你需要做的不止一種方法 - 這裏有選擇的祖父元素的幾種方法:

$("a").parent().parent(); 

這不正是這聽起來就像 - 它選擇你的錨的父母的父母。 父級是緊靠您的目標元素的元素。在這種情況下,這兩次都是div元素。

$("a").parents("div:eq(1)"); 

在這個例子中,注意我們使用的是複數父母。這將查找所有父母的元素,然後將其作爲集合返回。然後我們通過提供一個特定的選擇來指定我們想要在集合中返回哪個父母div:eq(1)

這就是說我們想要div元素,但是特別是那些在我們的結果集合中位置2的元素div。根據定義,位置2只能容納一個元素,因此我們只返回一個元素 - 祖父元素。

如果你被我調用這個「位置2」,而要求的div等於:eq1糊塗了,只記得JavaScript使用從零開始的索引系統,所以第一個項目集合中位於索引0處,第二位位於索引1處,依此類推。

$("a").parents("div").get(1); 

另一個例子,類似於上一個,它使用.get。這也要求.parents方法給我們所有的div元素。這返回一個完整的div元素的jQuery對象(假設你的父樹滿了div元素)。

.get方法帶有一個索引,對應於我們想要檢索的元素。在這種情況下,我們正在尋找第二個div元素,該元素將再次保留在對.parents的調用所產生的集合的索引1處。

需要注意的一件重要的事情是,這個例子與之前的例子不同,它返回一個實際的HTMLDivElement,而不是一個jQuery對象。區別在於,除非您在$()中重新包裝它,否則不能調用HTMLDivElement以外的jQuery方法。