Question

在以下代码中，当用户单击'.more' span元素时，我想使用jQuery从img标记中的article检索信息（例如，ID）

这是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()如果你有正确的父母，img是兄弟姐妹，但这比我提议的要脆弱一点。例如，这也可以，但它依赖于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对象，即使有更多附近的图片：

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

请参阅演示here

Answer 3

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

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

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

3 个答案: