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

但是......我需要找到<div class="something1">那个特定的父母.

基本上,有人可以告诉我如何引用更高级别的兄弟而不能直接引用它吗？我们称之为大哥哥.直接引用大哥的类名会导致页面上该元素的每个实例淡出 - 这不是理想的效果.

我试过了:

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