Пересечение 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.

Будьте осторожны, пересекая большие расстояния в документах – сложный обход требует того, чтобы строение документа оставалось тем же самым, что трудно гарантировать. Пересечение в один-два шага - это нормально, но лучше избегать пересечений, которые идут из одного контейнера в другой.

Далее: Контекст JavaScript