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.

有人可以帮忙吗？谢谢。

- Tom

---

Anurag的答案可能看起来不像是正确的 - 它确实让我停下来思考 - 但它指出了你代码中一个明显的拼写错误，导致你的选择器无法正常工作。在jQuery中，选择器应该是.parent()而不是.parents()。 - David Thomas

@ricebowl：错了。http://api.jquery.com/parents/ - SLaks

@ricebowl... parent() 会给我 div something2，所以我需要使用 parents() 来获取到 div box。 - Tom

啊，抱歉。嗯...我不知道是展示我的无知最好，还是删除错误以避免让其他人不高兴... =| 不过，至少我今天学到了有用的东西；这才是重点，对吧..？=) - David Thomas

@ricebowl，不用担心，感谢您的贡献。 - Tom

Answer 1

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

你需要获取最近父元素的子元素，像这样：

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

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

- SLaks

---

我知道这有点老了，但在这种情况下使用**parent()而不是closest()是否更好，因为我想closest()**需要更多的树遍历？ - rmorse

@acSlater：他 需要 树遍历。parent() 是错误的元素。 - SLaks

@acSlater：是的，那样做可以实现。但是，它会使JavaScript与HTML结构更加耦合。.closest（...）更具弹性，也更易读。 - SLaks

如果有人想知道：在使用.closest()找到正确的父元素之后，如果你想要查找一个不是直接子元素而是子元素的子元素（例如），只需使用.find()代替.children即可。 - Fabien Snauwaert

对于我的代码，我需要 $(this).closest('.box').prev('.something1') 但是这个答案帮助我理解了它。 - Robert

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");

还有许多其他方法，你可能会发现这些文档很有帮助。

- Anurag

---

感谢，但我并不是在寻找父级元素，而是想找父级元素（或者更准确地说是祖父级元素）的另一个子元素。 - Tom

呵呵...这确实是一个家庭事务。 - Tom

Answer 3

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

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

- user2601995

Answer 4

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

- Teja Kantamneni

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();
});

- Olly