Соседи, потомки и поиск элементов в 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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: