Соседи, потомки и поиск элементов в jQuery (prev, next, first, last, parent, find)

В jQuery существуют методы для работы с соседними элементами, потомками а также для поиска элементов внутри родительского. Рассмотрим эти методы.

Обращение к предыдущему и следующему элементу (prev, next)

Для обращения к предыдущему и следующему элементу существуют два метода под названием prev, next. Всё что они делают - указывают на предыдущий или последующий HTML тег. Попробуем применить их на практике. Используем их одновременно так, чтобы поменять HTML содержимое предыдущего и последующего элемента:

<div id="1">Тише, мыши, кот на крыше</div>
<div id="2">а котята ещё выше.</div>
<div id="3">Кот пошёл за молоком,</div>
<div id="4">а котята кувырком.</div>
<script>
   $('#2').prev().html('Мышь'); // меняет содержание элемента с id="1" на "Мышь"
   $('#3').next().html('Кот'); // меняет содержание элемента с id="4" на "Кот"
</script>

Результат выполнения такого кода будет таким:

<div id="1">Мышь</div>
<div id="2">а котята ещё выше.</div>
<div id="3">Кот пошёл за молоком,</div>
<div id="4">Кот</div>

Первый и последний вложенный элемент (first, last)

Методы first и last находят первый и последний элемент внутри родительского. Продемонстрируем их работу, модифицировав предыдущий применр.

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').first().html('Мышь'); // содержание первого элемента меняется на "Мышь"
   $('div').last().html('Кот'); // содержание последнего элемента меняется на "Кот"
</script>

Код $('div') вернёт ссылки на все div элементы. Но first и last отфильтруют первый и последний из них, поэтому метод html будет применён только к первому и последнему div:

<div>Мышь</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>Кот</div>

Обращение к родительскому элементу (parent)

В библиотеке jQuery есть удобный метод для обращения к родительскому элементу. Это метод parent. Благодаря ему не обязательно придумывать селектор, чтобы выбрать родительских элемент относительно текущего. Достаточно использовать этот метод. Попробуем продемонстрировать это на примере:

<div>
   <span id="mouse">Тише, мыши, кот на крыше</span>
</div>
<script>
   $('#mouse').parent().append('<span>а котята ещё выше.</span>');
</script>

В примере сначала выбирается элемент с id="mouse". Затем с помощью метода "parent" происходит обращение к его родительскому элементу. И только потом происходит вставка HTML кода в конец элемента с помощью метода "append". Результат выполнения кода:

<div>
   <span id="mouse">Тише, мыши, кот на крыше</span>
   <span>а котята ещё выше.</span>
</div>

Поиск элемента внутри родителя (find)

Порой надо найти элементы внутри уже найденных. Для этого можно использовать метод find. Продемонстрируем его работу наглядно:

<div id="mouse">
   <div>Тише, мыши, кот на крыше</div>
   <div>а котята ещё выше.</div>
   <div id="cat">Кот пошёл за молоком</div>
</div>
<script>
   $('#mouse').find('#cat').append('!!!');
</script>

В результате выполнения этого кода элементу с id="cat", который находится внутри элемента с id="mouse", будет в конец дописаны "!!!":

<div id="mouse">
   <div>Тише, мыши, кот на крыше</div>
   <div>а котята ещё выше.</div>
   <div id="cat">Кот пошёл за молоком!!!</div>
</div>