jQuery:如何访问父母的特定孩子?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2398947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:25:45  来源:igfitidea点击:

jQuery: How to get to a particular child of a parent?

jqueryjquery-selectorsparentsiblings

提问by Tom

To give a simplified example, I've got the following block repeated on the page lots of times (it's dynamically generated):

举一个简单的例子,我在页面上多次重复了以下块(它是动态生成的):

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

When clicked, I can get to the parent of the link with:

单击后,我可以通过以下方式访问链接的父级:

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

However... I need to get to the <div class="something1">of that particular parent.

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

Basically, can someone tell me how to refer to a higher-level sibling without being able to refer to it directly? Let's call it big brother. A direct reference to the big brother's class name would cause every instance of that element on the page to fade out - which is not the desired effect.

基本上,有人可以告诉我如何引用更高级别的兄弟姐妹而不能直接引用它吗?姑且叫大哥吧。直接引用大哥的类名会导致页面上该元素的每个实例淡出 - 这不是预期的效果。

I've tried:

我试过了:

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

Anyone? Thanks.

任何人?谢谢。

回答by SLaks

Calling .parents(".box .something1")will return all parent elements that match the selector .box .something. In other words, it will return parent elements that are .something1and are inside of .box.

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

You need to get the children of the closest parent, like this:

您需要获取最亲近的父母的孩子,如下所示:

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

This code calls .closestto get the innermost parent matching a selector, then calls .childrenon that parent element to find the uncle you're looking for.

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

回答by Anurag

$(this).parent()

Tree traversal is fun

树遍历很有趣

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

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

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

And much more ways, you might find these docshelpful.

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

回答by user2601995

This will find the first parent with class boxthen find the first child class with regex matching somethingand get the id.

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

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

回答by Teja Kantamneni

If I understood your problem correctly, $(this).parents('.box').children('.something1')Is this what you are looking for?

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

回答by Olly

You could use .each()with .children()and a selector within the parenthesis:

您可以在括号内使用.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();
});