В 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>
