Выберите братьев и сестер в JQuery

Question

В следующем коде, когда пользователь нажимает на элемент span '.more', я хочу получить информацию (например, идентификатор) из 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.

Вы не можете использовать .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);
});

См. Демонстрацию здесь

Answer 3

Вы можете использовать обычный селектор классов:

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