javascript - 定位父元素，但不知道子元素和父元素之间有多少个节点

Question

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

Answer 1

使用.closest()做到这一点

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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