.next( [selector ] )Returns: jQuery
Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
-
version added: 1.0.next( [selector ] )
-
selector
A string containing a selector expression to match elements against.
-
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.
Consider a page with a simple list on it:
|
1 2 3 4 5 6 7 |
|
If we begin at the third item, we can find the element which comes just after it:
|
1 |
|
The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.
Examples:
Find the very next sibling of each disabled button and change its text «this button is disabled».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Demo:
Find the very next sibling of each paragraph. Keep only the ones with a class «selected».
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
Demo:
В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.
find() – выбор потомков
Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find().
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
Например, выбрать все элементы с классом «carousel-items», расположенные в «.carousel»:
<div class="carousel">
<div class="carousel-items">
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-item">...</div>
<div class="carousel-items">
</div>
<script>
var carousel = $('.carousel');
// выберем потомков с классом carousel-item для элементов набора carousel
var items = carousel.find('.carousel-item');
// пример указания элементов в find посредством ссылки на DOM-элементы
// var elements = document.querySelectorAll('.carousel-item');
// var items = carousel.find(elements);
// с помощью набора jQuery
// var elements = $('.item');
// var items = carousel.find(elements);
</script>children() – выбор дочерних элементов
Кроме find() в jQuery имеется ещё один похожий метод: children().
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
<div class="message">
<h3>...</h3>
<p>...</p>
</div>
<div class="message">
<h3>...</h3>
<p>...</p>
</div>
<script>
const elements = $('.message').children();
</script>Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только <h3>:
const elements = $('.message').children('h3');closest() – выбор ближайшего предка
В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest().
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:
<ul>
<li>One</li>
<li class="active">Two</li>
<li>Three</li>
</ul>
<script>
// текущий набор
var elements = $('li.active');
// выберем ближайших предков по селектору ul для элементов, содержащихся в наборе elements
var ul = elements.closest('ul');
</script>next() – выбор следующего элемента
В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next().
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Например, выберем <li> расположенный после «.active»:
<ul>
<li>One</li>
<li class="active">Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script>
const element = $('li.active').next('li');
</script>Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
const element = $('li.active').next();Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll().
Например:
const elements = $('li.active').nextAll();Кроме next() и nextAll() в jQuery имеется ещё nextUntil(). Он позволяет получить все следующие элементы до указанного.
Например, выберем все <li> кроме последнего, расположенные после «.active»:
const elements = $('li.active').nextUntil('li','li:last-child');prev() – выбор предыдущего элемента
В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev(), prevAll() и prevUntil().
Например:
<div class="boxes">
<div></div>
<div></div>
<div></div>
<div class="current"></div>
<div></div>
</div>
<script>
var prev = $('.current').prev();
</script>siblings() – выбор сиблингов
Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings().
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
<ul>
<li>One</li>
<li class="active">Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script>
var elements = $('li.active').siblings();
</script>parent() – получение родителя
В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent().
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
Например, получим родительский элемент для <li> с классом active:
<ul>
<li>One</li>
<li class="active">Two</li>
<li>Three</li>
</ul>
<script>
const elements = $('li.active').parent();
</script>В jQuery кроме parent() имеется ещё метод parents(). Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html>).
Например, получим всех предков для <li> с классом active:
<body>
<ul>
<li>One</li>
<li class="active">Two</li>
<li>Three</li>
</ul>
...
<script>
const elements = $('li.active').parents(); // <ul>, <body>, <html>
</script>При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Например, получим предков, соответствующего селектору .one для элемента с классом three:
<div class="one">
<div class="two">
<div class="three">...</div>
</div>
</div>
<script>
var elements = $('.three').parents('.one');
</script>Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil():
Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container:
<div class="container">
<div class="one">
<div class="two">
<div class="active">...</div>
</div>
</div>
</div>
<script>
var elements = $('.three').parentsUntil('div', '.container');
</script>offsetParent() – получение ближайшего позиционированного предка
В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent(). Этот метод не принимает никаких аргументов.
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active:
<div class="container">
<div class="one" style="position: relative;">
<div class="two">
<div class="active">...</div>
</div>
</div>
</div>
<script>
var elements = $('.active').offsetParent();
</script>contents() — выбрать все дочерние узлы
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.
Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.
Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.
jQuery перемещения
Определение и применение
jQuery метод .next() позволяет получить каждый сестринский элемент, который находится следующим по отношению к текущему элементу в наборе соответствующих элементов.
Обращаю Ваше внимание, что метод .next() позволяет нам получить следующий сестринский элемент, выбранных элементов в дереве DOM и построить новый объект jQuery из соответствующих элементов. Для выбора предыдущего сестринского элемента Вы можете воспользоваться методом .prev().
jQuery синтаксис:
Синтаксис 1.0: // выбор следующего сестринского элемента $( selector ).next() // выбор следующего сестринского элемента с определенным селектором $( selector ).next( selector ) selector - Selector
Добавлен в версии jQuery
1.0
Значения параметров
| Параметр | Описание |
|---|---|
| selector | Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование метода .next()</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( 'li:first' ).next().css( "color", "red" ); // выбираем сестринский элемент, который находится следующим по отношению к первому элементу <li> в документе $( 'p' ).next().css( "color", "red" ); // выбираем каждый сестринский элемент, который находится следующим по отношению к элементу <p> в документе }); </script> </head> <body> <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> <div> <p>Параграф внутри <div></p> </div> <p>Параграф внутри <body></p> </body> </html>
В этом примере с использованием jQuery метода .next() мы выбираем сестринский элемент, который находится следующим по отношению к первому элементу <li> в документе, и каждый сестринский элемент, который находится следующим по отношению к элементу <p> в документе, и с помощью метода .css() устанавлием цвет текста красный.
Обратите внимание, что стили применились только к элементу <li>, это связано с тем, что у элемента <p>, вложенного в элемент <div> отсутствуют сестринские элементы, а после элемента <p>, вложенного в элемент <body> отсутствуют элементы впринципе.
Результат нашего примера:
В следующем примере мы рассмотрим использование метода .next() с дополнительным параметром:
<!DOCTYPE html> <html> <head> <title>Использование метода .next() (с дополнительным фильтром)</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $( document ).ready(function(){ $( 'li:nth-child(1)' ).next( ".active" ).css( "color", "red" ); // выбираем сестринский элемент, который находится следующим по отношению к первому дочернему элементу <li> своего родителя, если он соответствует переданному селектору }); </script> </head> <body> <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> </ul> <ul> <li>Первый</li> <li class = "active">Второй</li> <li>Третий</li> </ul> </body> </html>
В этом примере с использованием jQuery метода .next() мы выбираем каждый сестринский элемент, который находится следующим по отношению к первому дочернему элементу <li> своего родителя, при этом этот элемент должен соответствовать переданному селектору (класс .active).
Обратите внимание на то, что если бы мы не передали строку селектора, то элемент <li> был бы выбран в обоих списках. Результат нашего примера:
В 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>First of all, this was a really neat problem. Thanks for posting!
I accomplished this with a chained jQuery statement. Only thing is, if you run previous() on the top ul you’ll get body. Which I think technically makes sense. However, if this isn’t the desired behavior, see my update below.
Usage: next("#ul3") returns <li>5</li>
Next:
function next(selector) {
var $element = $(selector);
return $element
.children(":eq(0)")
.add($element.next())
.add($element.parents().filter(function() {
return $(this).next().length > 0;
}).next()).first();
}
Previous:
function previous(selector) {
var $element = $(selector);
return $element
.prev().find("*:last")
.add($element.parent())
.add($element.prev())
.last();
}
Update If you want to limit the upper most node previous can be, you could do:
function previous(selector, root) {
var $element = $(selector);
return $element
.prev().find("*:last")
.add($element.parent())
.add($element.prev())
.last().not($(root).parent());
}
http://jsfiddle.net/andrewwhitaker/n89dz/
Another Update: Here’s a jQuery plugin for convenience:
(function($) {
$.fn.domNext = function() {
return this
.children(":eq(0)")
.add(this.next())
.add(this.parents().filter(function() {
return $(this).next().length > 0;
}).next()).first();
};
$.fn.domPrevious = function() {
return this
.prev().find("*:last")
.add(this.parent())
.add(this.prev())
.last();
};
})(jQuery);
Expanded example here: http://jsfiddle.net/andrewwhitaker/KzyAY/