jQuery：如何找到父母的特定孩子？

Posted 2023-03-05

【中文标题】jQuery：如何找到父母的特定孩子？

【英文标题】：jQuery: How to get to a particular child of a parent?

【发布时间】：2011-01-24 19:57:18

【问题描述】：

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

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

但是...我需要联系特定父母的<div class="something1">。

基本上，有人可以告诉我如何在不能直接引用的情况下引用更高级别的兄弟姐妹吗？姑且称其为大哥吧。直接引用老大哥的类名会导致页面上该元素的每个实例都淡出——这不是预期的效果。

我试过了：

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

有人吗？谢谢。

【问题讨论】：

Anurag 的回答可能看起来不是正确的——它确实让我停下来思考——但它指出了你的代码中一个明显的错字导致你的选择器失败。 jQuery 中的选择器是 .parent() not .parents()

@ricebowl：错了。 api.jquery.com/parents

@ricebowl... parent() 会给我 div something2，所以我需要 parents() 才能进入 div 框。

啊；我很抱歉。嗯...我不知道是否最好将我的无知展示出来，或者删除错误以避免打扰其他人... =|不过，至少我今天学到了一些有用的东西；这就是重点，对吧..？ =)

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

【参考方案1】：

$(this).parent()

树遍历很有趣

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

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

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

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

【讨论】：

谢谢，但不是在寻找父母，而是寻找父母的另一个孩子（实际上是祖父母）。

嘿嘿……确实是家事。

【参考方案2】：

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

你需要得到最近的父母的孩子，像这样：

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

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

【讨论】：

我知道这有点老了，但在这种情况下使用 parent() 而不是像我一样使用 closest() 不是更好吗想象一下 closest() 有更多的树遍历？

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

啊，是的，Tom 需要的是 parent().parent() 抱歉！ :)

@acSlater：是的；那行得通。但是，它使 javascript 与 html 结构更加耦合。 .closest(...) 更有弹性，也更易读。

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

【参考方案3】：

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

【参考方案4】：

您可以将.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();
);

【参考方案5】：

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

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