jQuery find и другие методы поиска по DOM относительно элемента

Для решения некоторых нетривиальных задач при разработке иногда может понадобиться произвести поиск элементов DOM относительно определенного элемента. В библиотеке jQuery для этого существует несколько методов. В этой статье мы рассмотрим методы jQuery find, children, parent, parents, siblings, closest, next и prev.

Поиск потомков: jQuery find и children

Метод jQuery find позволяет осуществлять поиск дочерних элементов определенного элемента.

Синтаксис метода jQuery find выглядит следующим образом:

$(parent).find(child);

• parent — селектор, определяющий выбранный элемент, внутри которого будет выполняться поиск.
• child — опциональный селектор, который используется для дополнительной фильтрации найденных элементов, уточняя, какие конкретно элементы необходимо выбрать.

Метод find выполняет поиск элементов внутри каждого выбранного элемента и возвращает коллекцию jQuery, содержащую все найденные элементы. Это позволяет дальше работать с найденными элементами, применять к ним различные операции или выполнять дополнительные действия.

Стоит отметить, что метод find производит поиск в глубину, то есть он рекурсивно просматривает все вложенные элементы в выбранных элементах. Поэтому метод бывает полезен при работе с определенными элементами внутри сложных структур DOM.

Метод jQuery children выполняет сходную с методом find задачу — он также ищет дочерние элементы родителя. Однако, в отличие от find, метод children производит выбор прямых потомков указанного родительского элемента — то есть на первом уровне вложенности.

При вызове метод children проходит по всем прямым потомкам selector и проверяет, соответствуют ли они селектору (если указан).

Синтаксис метода jQuery children:

$(parent).children(child);

• parent — элемент, чьих прямых потомков мы хотим найти.
• child — необязательный селектор, который определяет, какие элементы нужно выбрать.

Пример с методам jQuery find и children:

<div id="demoContainer">
    <span>Дочерний span контейнера на первом уровне вложенности.</span>

    <article>
        <h4>Заголовок</h4>
        <ul class="demoFind__list">
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
        </ul>
        <p>Некоторые части <span>этого текста</span> обернуты в тег span. Выделим их <span>полужирным начертанием</span> с помощью метода find. Теги span на этом уровне вложенности не будут доступны методу children, которые применяется к контейнеру.</p>
    </article>

    <span>Еще один дочерний span контейнера на первом уровне вложенности.</span>
</div>

// Зададим полужирное начертание всем элементам span в контейнере
$('#demoContainer').find('span').css('font-weight', '700');

// Подчеркнем элементы span на первом уровне вложенности в контейнере
$('#demoContainer').children('span').css('text-decoration', 'underline');

Пример в интерактивном виде:

В этом примере продемонстрировано отличие методов jQuery find и children. С помощью метода find мы делаем полужирным текст в тегах span на любом уровне вложенности. Но делаем текст подчеркнутым только в тех элементах span, которые являются прямыми потомками элемента с классом demoContainer.

Поиск предков: jQuery parent, parents и closest

Для поиска вверх по иерархии относительно определенного элемента можно использовать методы jQuery parent, parents и closest.

Синтаксис метода jQuery parent выглядит так:

$(element).parent(selector);

• element — элемент DOM, для которого нужно найти родителя.
• selector — необязательный селектор, который определяет, какой родительский элемент выбрать.

Метод parent находит только прямого родителя указанного элемента и проверяет, соответствует ли он селектору (если указан). Если требуется выбрать предков элемента на всех уровнях вложенности, нужно воспользоваться методом parents.

Синтаксис метода jQuery parents:

$(element).parents(selector);

• element — элемент DOM, для которого нужно найти предков.
• selector — необязательный селектор, который определяет, каких предков выбрать.

Метод parents находит всех предков указанного элемента начиная с прямого родителя и до самого верхнего уровня вложенности. Затем он проверяет, соответствуют ли они селектору при условии, что последний был указан при вызове метода.

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

Синтаксис метода jQuery closest следующий:

$(element).closest(selector);

• element — элемент, для которого нужно найти предка.
• selector — опциональный параметр для выбора элемента с конкретным селектором.

Метод closest выполняет обход по DOM от текущего элемента (включая его самого) вверх по его родителям, проверяя каждый предок на соответствие указанному селектору. Как только найден первый соответствующий предок, он будет выбран и дальнейший обход будет прекращен.

Пример с методами jQuery parent, parents и closest:

<div id="demoContainer">
    <ul>
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3
            <ul>
                <li>Пункт 4</li>
                <li>Пункт 5</li>
                <li>Пункт 6
                    <ul id="demoTarget">
                        <li>Пункт 7</li>
                        <li>Пункт 8</li>
                        <li>Пункт 9</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

// Установим серый фон и белый шрифт первому найденному ul от текущего элемента (включая его самого) вверх по иерархии
$('#demoTarget').closest('ul').css({'background': '#373737', 'color': '#fff'});

// Отстилизуем таким же образом первого родителя текущего списка ul
$('#demoTarget').parent('li').css({'background': '#373737', 'color': '#fff'});

// Добавим аналогичные стили ко всем родителям целевого элемента, которые являются тегами li
$('#demoTarget').parents('li').css({'background': '#373737', 'color': '#fff'});

Пример в интерактивном виде:

В примере выше у нас есть вложенный список. Целевым элементом, относительно которого ищутся родительские элементы, является список с идентификатором demoTarget. С помощью исследуемых методов мы находим нужные элементы и добавляем им стили.

Используя метод jQuery closest, мы получаем доступ к первому элементу ul начиная от текущего и вверх по иерархии. В нашем случае найденным элементов будет являться сам целевой список с классом demoTarget. Так как поиск с помощью метода closest осуществляется с включением текущего элемента. Методом parent мы находим только прямого родителя целевого элемента («Пункт 6»). В итоге будет стилизован сам целевой элемент с его прямым предком. С помощью метода parents мы ищем все родительские элементы li целевого элемента. Ими являются «Пункт 6» и «Пункт 3». Добавив к найденным родителям серый фон и белый шрифт, мы изменим стиль «Пункта 3» и всех его вложенных элементов.

Поиск смежных элементов: jQuery siblings

Метод jQuery siblings позволяет выбрать соседние элементы, находящиеся на одном уровне иерархии указанного элемента.

Синтаксис метода jQuery siblings следующий:

$(element).siblings(selector);

• element — элемент DOM, относительно которого нужно найти соседей.
• selector — необязательный селектор для выбора определенных соседних элементов.

Метод siblings находит все соседние элементы определенного элемента, исключая его самого. Затем метод проверяет, соответствуют ли найденные элементы селектору, если этот селектор указан.

Пример:

<div id="demoContainer">
    <div>Найди мои смежные элементы, у которых есть класс same</div>
    <div class="same">У меня класс same</div>
    <div class="other">У меня класс other</div>
    <div class="same">У меня класс same</div>
    <div class="same">У меня класс same</div>
    <div>Я без класса</div>
    <div>
        Я сам без класса same, но у меня есть вложенный
        <span class="same">элемент с классом same</span>
    </div>
</div>

// Для первого блока div в контейнере изменим стилизацию смежных элементов с классом same на одном уровне иерархии
$('#demoContainer div:first-child').siblings('.same').css({'background': '#373737', 'color': '#fff'});

В этом примере несколько блоков в контейнере. Задача состоит в том, чтобы для первого блока найти все соседние элементы на одном уровне, имеющие класс same. В итоге у нас закрасится второй, четвертый и пятый элементы. Третий и пятый элементы находятся на одном уровне вложенности с первым, но у них нет класса same. А последний блок содержит в себе элемент с классом same, однако этот элемент расположен на другом уровне иерархии, нежели первый.

Пример в интерактивном виде:

Поиск следующего и предыдущего элементов: jQuery next и prev

Для выбора предыдущего и следующего элемента относительно определенного элемента в jQuery есть методы next и prev.

Синтаксис методов next и prev выглядит следующим образом:

$(element).next(selector);
$(element).prev(selector);

• element — элемент, для которого нужно выбрать предыдущего или следующего соседа.
• selector — нужен для указания конкретного селектора соседей и не является обязательным.

Метод jQuery next выбирает следующий соседний элемент указанного элемента DOM. Он ищет первый следующий элемент после выбранного элемента, удовлетворяющий указанному селектору (если указан). Если селектор не указан, будет выбран первый следующий элемент независимо от его типа.

Чтобы найти предыдущий соседний элемент определенного элемента, используется метод prev. Он производит поиск первого предыдущего элемента перед выбранным элементом. Если указан конкретный селектор для выбора, будет выбран первый предыдущий элемент, подходящий под условие этого селектора.

Пример:

<div id="demoContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

$('#demoContainer > div').click(function() {
    // Сбросим стили для всех div
    $('#demoContainer > div').css({'background': 'inherit', 'color': 'inherit'});
    // К текущему элементу установим серый фон и белый шрифт
    $(this).css({'background': '#7a7a7a', 'color': '#fff'});
    // Следующему и предыдущему элементам зададим светло-серый фон и белый шрифт
    $(this).next().css({'background': '#b3b3b3', 'color': '#fff'});
    $(this).prev().css({'background': '#b3b3b3', 'color': '#fff'});
});

Пример в интерактивном виде (кликайте по блокам с цифрами):

В этом примере у нас есть ряд блоков с цифрами. При нажатии на любой из них текущий блок окрашивается в темно-серый цвет, а находящиеся рядом блоки — в светло-серый с помощью методов prev и next.

Заключение

Таким образом, мы рассмотрели основные методы jQuery поиска по структуре DOM: jQuery find, children, parent, parents, siblings, closest, next и prev. Благодаря этим методам, можно легко находить нужные элементы, основываясь на различных критериях, таких как классы, идентификаторы, атрибуты и иерархия. Каждый метод имеет свои особенности и применение, в зависимости от конкретных задач.