jquery - 在 jQuery 中选择 sibling 的 sibling

Question

在下面的代码中，当用户单击 '.more' span 元素时，我想从其中的 img 检索信息(例如，ID)使用 jQuery 的 article 标签。

这是 HTML:

<article>
<img src="..." id="TR"/>
<div>some text <a>link</a> <span class="more">read more</span></div>
</article>

我已经尝试过这段代码:

   $('.more').click(function () {

        var id = $(this).siblings().siblings('img').attr('id');

});

但似乎不起作用。有什么想法吗？

非常感谢!

Answer 1

你可以这样做:

$(".more").click(function() {
    var id = $(this).closest("article").find("img:first").attr("id");
});

这将查找包含 <article> 的父树。标签。然后，它找到第一个 <img>标记并获取其 id 值。

您不能使用.siblings()上$(this)因为该图像不是 $(this) 的直接同级图像。您可以使用.siblings()如果你有正确的 parent ，img是 sibling ，但这比我提议的要脆弱一些。例如，这也可以，但它依赖于 HTML 对象的更精确定位，任何轻微的编辑都可能会破坏此代码:

$(".more").click(function() {
    var id = $(this).parent().prev().attr("id");
});

或

$(".more").click(function() {
    var id = $(this).parent().siblings("img").attr("id");
});

您不能使用.closest()关于<img>直接标记，因为 img 不是 .more 的父级对象。

如果这是我的代码，我会这样做，因为它是最灵活的，并且如果稍微编辑 HTML 并且您一定会获得正确的 img 对象，即使有更多的 img 对象附近的图像:

<article>
<img class="target" src="..." id="TR"/>
<div>some text <a>link</a> <span class="more">read more</span></div>
</article>

$(".more").click(function() {
    var id = $(this).closest("article").find(".target").attr("id");
});