在jQuery中选择同级的同级

Question

在下面的代码，当用户点击了在'.more'跨度元件，我想检索来自信息（例如，ID） img的内article使用jQuery标签。

这是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值。

您不能在$(this) .siblings()上使用.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");
});

您不能直接在<img>标记上使用.closest() ，因为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');