在 jQuery 中选择兄弟姐妹的兄弟姐妹

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

这将查找包含

标记的父树。然后，它找到其中的第一个 标记并获取其 id 值。

您不能在 $(this) 上使用 .siblings()，因为该图像不是 $(this) 的直接同级图像。如果您获得了该 img 的兄弟姐妹的正确父级，则可以使用 .siblings() ，但这比我建议的要脆弱一些。例如，这也可以，但它依赖于 HTML 对象的更精确定位，任何轻微的编辑都可能会破坏此代码：

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

或者

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

You can't use .closest() on the 直接使用 标记，因为 img 不是 .more 对象的父对象。

如果这是我的代码，我会这样做，因为它是最灵活的，并且如果稍微编辑 HTML，最不可能中断，并且即使附近有更多图像，您也一定会获得正确的 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");
});

Answer 2

使用parent().siblings()而不是siblings().siblings()

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

请参阅此处的演示

Answer 3

您可以使用常规的类选择器：

$('article > img[id]').attr('id');