Как получить другое изображение с помощью jQuery

Question

Мой DOM выглядит так:

<div class="stuff">
  <a href="#"><img src=""></a> <b>hello</b>
  <a href="#"><img src=""></a>
</div>

Иногда у меня есть ссылка на первое изображение, а иногда на второе изображение.

1. Когда у меня есть первое изображение с помощью $ (), как мне выбрать второе изображение?
2. Когда у меня есть второе изображение с помощью $ (), как выбрать 1-е изображение?

Answer 1

Посмотрите на jQuery eq селектор .

var first = $('.stuff img:eq(0)');
var second = $('.stuff img:eq(1)');

Answer 2

Учитывая myImage в качестве ссылки на одно из изображений, $(".stuff img").not(myImage) должно дать вам другое (или другие, если у вас более двух изображений).

Answer 3

Вы можете получить другой в обоих случаях с:

$(this).parent().siblings().children("img").remove(this);

или просто:

$("div.stuff img").remove(this);

Answer 4

1. .parent().nextAll("a").children("img")
2. .parent().prevAll("a").children("img")

Это довольно не элегантный способ для достижения этой цели, но он довольно явно описывает то, что вы ищете - почти как XPath. Как только вы начинаете работать с более чем двумя ссылками, вы можете обнаружить, что техника, описанная Беном Альпертом или Клетусом, более гибкая (менее зависимая от строгой иерархии).

Answer 5

Вы должны быть в состоянии использовать что-то вроде

$('DIV.stuff:first-child')
$('DIV.stuff:nth-child(3)'

Это вернет якорные теги, которые можно использовать для доступа к изображениям. Вторым является nth-child (3), потому что nth-child (2) вернет жирный тэг. Хотя идеальным способом было бы применить класс или идентификатор к каждому изображению или привязке.