jQuery：如何获取父级的特定子级？

Question

举一个简化的例子，我在页面上多次重复以下块（它是动态生成的）：

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

单击时，我可以通过以下方式到达链接的父级：

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

但是...我需要到达该特定父级的

。

基本上，有人可以告诉我如何在无法直接引用的情况下引用更高级别的兄弟姐妹吗？我们就称呼它为大哥吧。直接引用老大哥的类名会导致页面上该元素的每个实例淡出 - 这不是所需的效果。

我试过了：

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

有人吗？谢谢。

Answer 1

调用 .parents(".box .something1") 将返回与选择器 .box .something 匹配的所有父元素。换句话说，它将返回 .something1 且位于 .box 内部的父元素。

您需要获取最近父级的子级，如下所示：

$(this).closest('.box').children('.something1')

此代码调用 .closest 获取与选择器匹配的最内层父元素，然后在该父元素上调用 .children 来查找您要查找的叔叔。

Answer 2

$(this).parent()

树遍历很有趣，

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

还有更多方法，您可能会发现这些文档很有帮助。

Answer 3

这将找到第一个具有 box 类的父类，然后找到第一个具有正则表达式匹配 something 的子类并获取 id。

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

Answer 4

如果我正确理解您的问题，$(this).parents('.box').children('.something1') 这是您要找的吗？

Answer 5

您可以将 .each() 与 .children() 和括号内的选择器一起使用：

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});