Question

我对如何正确选择父项感到困惑，那就是2 DIV了。

换句话说，我的HTML看起来像这样：

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

这是我目前的jQuery：$("a[href$='.jpg']").addClass("Image");

但是，我不想将该类添加到<a>，而是要将该类添加到上面的“DIV”文件夹中。

最好的方法是什么？

谢谢！

Answer 1

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

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

这听起来确实如此 - 它选择了锚点父级的父级。父是紧邻目标元素的元素。在这种情况下，它两次都是div元素。

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

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

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

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

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

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

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

需要注意的一件重要事情是，此示例与之前的示例不同，它返回实际的HTMLDivElement，而不是jQuery对象。区别在于你不能从HTMLDivElement调用jQuery方法，除非你再次将它包装在$()中。

Answer 2

这将有效：

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

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

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

Answer 3

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