Jquery получить ближайший элемент ниже выбранного и с помощью селектора

#jquery

Вопрос:

Кажется, об этом спрашивали около миллиарда раз, но я не мог найти, как конкретно сделать то, что я хочу сделать, хотя это очень просто:

 <button></button>
<button></button>
<img />

В принципе, я хочу нажать любую кнопку и попросить их обновить изображение. С помощью этого кода:

 $(this).next('img').attr("src","newimage.png");

Нижняя кнопка работает, а верхняя — нет. Кажется, логично выбирать элемент ‘next’, но, однако, нелогично не с помощью селектора, поскольку в противном случае верхняя кнопка работала бы, поскольку она продолжала бы находить следующий элемент, который является элементом img.

Я пробовал другие вещи, такие как closest (), но, похоже, это тоже не делает того, что предполагает его название.

1. this В опубликованном коде нет контекста … пожалуйста, добавьте полный код.

2. nextAll('img').eq(0) получит все изображения, следующие за кнопками, и захватит первое

3. Похоже, что они братья и сестры, так что сделайте это как $(this).siblings('img')... .

4. @Taplar Да, это сработало бы так же, как и в ответе ниже. Я действительно очень удивлен, что нет функции для получения следующего соседнего элемента с помощью селектора. Я думаю, что базовый next () должен делать это по умолчанию.

Ответ №1:

Проблема в том, что next() ищет только следующий родственный элемент. Чтобы исправить это, вы могли бы использовать nextAll() наряду с :first для извлечения img требуемого:

 $('button').click(function() {
  $(this).nextAll('img:first').attr("src", 'https://i.imgur.com/CaTFJ0z.png');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>A</button>
<button>B</button><br />
<img src="https://i.imgur.com/RGv7GmZ.png" />

1. Этот код действительно работает. Значит, на самом деле нет подлинной функции ‘nearest’? Странно, что вам приходится выполнять этот странный обходной путь только для того, чтобы заставить что-то подобное работать.

2. На самом деле это не обходной путь, просто так оно работает. DOM представляет собой древовидную структуру, и «ближайший» — это очень относительный термин. Существует множество методов обхода для перемещения вверх, вниз и вбок, но нет ничего, что явно говорило бы «двигаться вбок, но игнорировать X узлов», вот почему вам нужно сделать то, что я упомянул выше.

3. Да, я просто предположил, что next () может использовать селектор, но я думаю, что это невозможно, он просто получает то, что находится рядом, без указания опции.