以父元素为目标，但不知道子元素和父元素之间有多少节点

Target an parent element but without knowing how many nodes are in between child and parent

本文关键字：元素 之间 节点 多少 目标 不知道      更新时间：2023-09-26

HTML可能是：

<div class="SomeWrapper">
    <img scr="img2.jpg" />
    <img scr="img3.jpg" />
    <img scr="img4.jpg" />
    <img scr="img5.jpg" />
</div>

或者可能是

<div class="SomeWrapper">
    <li><a href="#"><img scr="img1.jpg" /></a></li>
    <li><a href="#"><img scr="img2.jpg" /></a></li>
    <li><a href="#"><img scr="img3.jpg" /></a></li>
    <li><a href="#"><img scr="img4.jpg" /></a></li>
    <li><a href="#"><img scr="img5.jpg" /></a></li>
</div>

我的javascript正在检查加载的图像。在加载图像时，它希望将一些效果应用于"SomeWrapper"div之后的第一个父元素（而不是图像本身）。

通常我会做类似.parent().parent()的事情，但我并不总是知道这张照片会有多少父母。

$obj.find("img").load(function(){
    $(this).parent().animate({opacity: '1'},{duration: settings.fadeSpeed});
});

我如何将目标对准正确的父对象来代替上面的$(this).parent()？

编辑：$obj恰好是我想要瞄准的元素

编辑1：我不知道父类名称的值，在这种情况下是".SomeWrapper"，所以我不能使用$（".SomeWrapper"）

不过，我可以通过从DOM中获取该值，但我更喜欢不依赖于硬编码类或id的的相对解决方案

编辑2：以下是的实际文件

https://github.com/ed-lea/jquery-collagePlus/blob/f4fb3f12750394acdd627fc4d2f2aa3a5091e17d/examples/example-size-in-tag.html

这里我想替换.parent().parent()，因为它是一个动态值https://github.com/ed-lea/jquery-collagePlus/blob/f4fb3f12750394acdd627fc4d2f2aa3a5091e17d/jquery.collagePlus.js#L316

使用.closest（）来执行

对于集合中的每个元素，获取与选择器，方法是测试元素本身并向上遍历其DOM树中的祖先。

$(this).closest('.SomeWrapper').parent().animate({opacity: '1'},{duration: settings.fadeSpeed});
JQuery也有.tparents（[selector]）方法

根据文件：

parents（）和parent（）方法相似，只是后者只在DOM树上移动一个级别。

因此，在您的情况下，您可以使用：

$(this).parents(".SomeWrapper").animate({opacity: '1'},{duration: settings.fadeSpeed});

UPD:根据更改后的问题：

edit:$obj恰好是我想要针对的元素

关于：

$obj.find("img").load(function(){
    $obj.animate({opacity: '1'},{duration: settings.fadeSpeed});
});

如果你有循环，你可以使用闭包：

$obj.find("img").load(function(target) {
     return function(){
         target.animate({opacity: '1'},{duration: settings.fadeSpeed});
     }
}($obj));

您需要使用closest()来获得.SomeWrapper元素，然后使用parent()在DOM中再提升1级。试试这个：

$obj.find("img").load(function(){
    $(this).closest('.SomeWrapper').parent().animate({ opacity: '1' },{ duration: settings.fadeSpeed });
});

假设"somewrapper"的子级都没有相同的类名，则可以使用.closest（）方法。

您可以使用这个：

$(this).parents('SomeWrapper')
相关文章：