在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');