Пересечение DOM с jQuery
Как только Вы сделали начальную выборку с jQuery, можно обойти (перечечь) то, что было только что выбрано. Пересечение может быть разбито на три основных части: родители, дочерние элементы и одноуровневые элементы. У jQuery есть масса легких в использовании методов для всех этих частей. Заметьте, что каждому из этих методов можно дополнительно передать строковые селекторы, и некоторые могут также принимать другой объект jQuery, чтобы отфильтровать Вашу выборку.
Родители
Методы для того, чтобы найти родителей для выборки включают .parent()
, .parents()
, .parentsUntil()
и .closest()
.
<div class="grandparent">
<div class="parent">
<div class="child">
<span class="subchild"></span>
</div>
</div>
<div class="surrogateParent1"></div>
<div class="surrogateParent2"></div>
</div>
Выбор прямого родителя элемента:
// возвращает [ div.child ]
$( "span.subchild" ).parent();
Выбор всех родителей элемента, которые соответствуют данному селектору:
// возвращает [ div.parent ]
$( "span.subchild" ).parents( "div.parent" );
// возвращает [ div.child, div.parent, div.grandparent ]
$( "span.subchild" ).parents();
Выбор всех родителей элемента вплоть до, но *не включая* селектор:
// возвращает [ div.child, div.parent ]
$( "span.subchild" ).parentsUntil( "div.grandparent" );
Выбор самого близкого родителя, отметьте, что только один родитель будет выбран и что сам начальный элемент будет включен в поиск:
// возвращает [ div.child ]
$( "span.subchild" ).closest( "div" );
// возвращает [ div.child ], т.к. селектор
// также включен в поиск:
$( "div.child" ).closest( "div" );
Дочерние элементы
Методы для того, чтобы найти дочерние элементы из выборки включают .children()
и .find()
. Различие между этими методами заключается в том, как далеко в структуру потомков делается выборка. .children()
воздействует только на прямые дочерние узлы, в то время как .find()
может пересечь рекурсивно дочерние элементы, дочерние элементы этих дочерних элементов, и так далее.
Выбор прямых дочерних элементов элемента:
// возвращает [ div.parent,
// div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).children( "div" );
Обнаружение всех элементов в пределах выборки, которые соответствуют селектору:
// возвращает [ div.child, div.parent,
// div.surrogateParent1, div.surrogateParent2 ]
$( "div.grandparent" ).find( "div" );
Одноуровневые элементы
Остальная часть методов обхода в пределах jQuery имеет дело с обнаружением одноуровневых элементов. Есть несколько основных методов, связанных с направлением обхода. Можно обнаружить предыдущие элементы с .prev()
, следующие элементы с .next()
, и те и другие с .siblings()
. Есть также несколько других методов, которые построены на основе этих основных методов: .nextAll()
, .nextUntil()
, .prevAll()
и .prevUntil()
.
Выбор следующего одноуровневого элемента селекторов:
// возвращает [ div.surrogateParent1 ]
$( "div.parent" ).next();
Выбор предыдущего одноуровневого элемента селекторов:
// возвращает [] as No sibling exists before div.parent
$( "div.parent" ).prev();
Выбор всех следующих одноуровневых элементов селектора:
// возвращает [ div.surrogateParent1,
// div.surrogateParent2 ]
$( "div.parent" ).nextAll();
// возвращает [ div.surrogateParent1 ]
$( "div.parent" ).nextAll().first();
// возвращает [ div.surrogateParent2 ]
$( "div.parent" ).nextAll().last();
Выбор всех предыдущих одноуровневых элементов селектора:
// возвращает [ div.surrogateParent1, div.parent ]
$( "div.surrogateParent2" ).prevAll();
// возвращает [ div.surrogateParent1 ]
$( "div.surrogateParent2" ).prevAll().first();
// возвращает [ div.parent ]
$( "div.surrogateParent2" ).prevAll().last();
Использование .siblings()
, чтобы выбрать все одноуровневые элементы:
См. полную документацию для этих методов и других в документации Обхода на api.jquery.com.
Будьте осторожны, пересекая большие расстояния в документах – сложный обход требует того, чтобы строение документа оставалось тем же самым, что трудно гарантировать. Пересечение в один-два шага - это нормально, но лучше избегать пересечений, которые идут из одного контейнера в другой.