jQuery Select 2 Divs Up答案

【问题标题】：jQuery Select 2 Divs UpjQuery Select 2 Divs Up
【发布时间】：2013-01-02 23:34:40
【问题描述】：

我对如何正确选择父项有点困惑，即 2 DIV's 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。

最好的方法是什么？

谢谢！

【问题讨论】：

【解决方案1】：

这将起作用：

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

它首先导航到所选元素的父元素，然后导航到该元素之前最近的同级元素，从而到达您需要的div 元素。

有关详细信息，请参阅 parent 和 prev 上的文档。

【讨论】：

【解决方案2】：

鉴于 jQuery 的稳健性，几乎总是有不止一种方法可以做您需要做的事情 - 这里有一些选择祖父元素的方法：

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

这正是它听起来的样子 - 它选择了锚的父级的父级。 parent 是紧邻目标元素的元素。在这种情况下，两次都是 div 元素。

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

在本例中，请注意我们使用了复数 parents。这会查找元素的所有父元素，然后将其作为集合返回。然后，我们通过提供特定的选择来指定我们希望在集合中返回的父母：div:eq(1)。

这表示我们想要 div 元素，但特别是那些在我们的结果集合中位于位置 2 的 div 元素。根据定义，位置 2 只能容纳一个元素，因此我们只返回一个元素 - 祖父元素。

如果您对我在要求等于 (:eq) 1 的 div 时将其称为“位置 2”感到困惑，请记住 JavaScript 使用从零开始索引系统，因此集合中的第一项在索引 0 处，第二个在索引 1 处，依此类推。

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

另一个示例，与上一个类似，使用.get。这也调用了.parents 方法来为我们提供所有div 元素。这将返回一个包含 div 元素的 jQuery 对象（假设您的父树中包含 div 元素）。

.get 方法采用一个索引，对应于我们要检索的元素。在这种情况下，我们正在寻找第二个 div 元素，该元素将再次保存在调用 .parents 产生的集合的索引 1 处。

需要注意的重要一点是，与之前的示例不同，此示例返回一个实际的HTMLDivElement，而不是一个 jQuery 对象。不同之处在于您不能从 HTMLDivElement 调用 jQuery 方法，除非您将其再次包装在 $() 中。

【讨论】：

【解决方案3】：

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

【讨论】：