jQuery метод .children()

Определение и применение

jQuery метод .children() возвращает дочерние элементы каждого элемента в наборе совпавших элементов, дополнительно может фильтроваться с помощью заданного селектора.

jQuery синтаксис:

Код
Синтаксис 1.0:
// возвращает дочерние элементы
$( selector ).children()

// возвращает дочерние элементы, если они соответствуют селектору
$( selector ).children( selector )

selector - Selector

Добавлен в версии jQuery

1.0

Значения параметров

ПараметрОписание
selectorСтрока селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор дочернего элемента (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует этому селектору. Необязательный параметр.

Пример использования

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование метода .children()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("ul").children().css("border", "1px solid green"); // выбираем все дочерние элементы элементов <ul> в документе
        $("ul").children(".active").css("color", "red"); // выбираем все дочерние элементы элементов <ul> в документе, если они имеют класс active
      });
    </script>
  </head>
  <body>
    <ul>
      <li>Элемент списка</li>
      <li class="active">Элемент списка</li>
      <li
        >Элемент списка
        <ul>
          <li>Элемент списка</li>
          <li>Элемент списка</li>
          <li>Элемент списка</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

В этом примере с использованием jQuery метода .children() мы выбираем все дочерние элементы элементов <ul> в документе, и с помощью метода .css() задаем им сплошную границу размером 1 пиксель зеленого цвета со всех сторон, в результате чего стили были применены ко всем элементам <li> в документе.

Во втором случае мы используем метод .children() с дополнительным фильтром, в которм мы указываем, что выбор дочернего элемента осуществляет только в том случае, если он соответствует классу active, в результате чего был выбран только один элемент <li> в документе.

Результат нашего примера:

Пример использования метода .children()
Пример использования метода .children()

В следующем примере мы рассмотрим отличие методов .children() и .find():

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Отличие метода .find() от .children()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".children").click(function () {
          // запускаем функцию при нажатии на элемент с классом children
          $("*").css("background", "#fff"); // устанавливаем всем элементам цвет заднего фона белый
          $("div").children("span").css("background", "red"); // выбираем все дочерние элементы <span> элементов <div> в документе
        });
        $(".find").click(function () {
          // запускаем функцию при нажатии на элемент с классом find
          $("*").css("background", "#fff"); // устанавливаем всем элементам цвет заднего фона белый
          $("div").find("span").css("background", "green"); // выбираем всех потомки <span> элементов <div>
        });
      });
    </script>
  </head>
  <body>
    <div>
      Текст <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока
      <h2>Заголовок <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока</h2>
      <p><span>&lt;span&gt;Первый&lt;/span&gt;</span> параграф внутри блока</p>
      <p><span>&lt;span&gt;Второй&lt;/span&gt;</span> параграф внутри блока</p>
    </div>
  </body>
</html>

В этом примере с использованием jQuery метода .click() мы при нажатии на элемент <button> (кнопка) с классом children вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. Кроме того, с использованием jQuery метода children() выбираем все дочерние элементы <span> элементов <div> в документе, и с помощью метода .css() устанавливаем им красный цвет заднего фона. В результате чего выбран будет только один элемент, так как только один элемент <span> является дочерним элементом.

Также с использованием jQuery метода .click() мы при нажатии на элемент <button> (кнопка) с классом find вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. С использованием jQuery метода .find() выбирает все потомки <span> элементов <div> в документе, и с помощью метода .css() устанавливаем им зеленый цвет заднего фона. Как вы можете заметить выбраны будут все вложенные внутри <div> элементы <span>.

Отличие метода .find() от .children(): попробуйте сами

index.html
HTML
<button class="children">children()</button><button class="find">find()</button>
<div>
  Текст <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока
  <h2>Заголовок <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока</h2>
  <p><span>&lt;span&gt;Первый&lt;/span&gt;</span> параграф внутри блока</p>
  <p><span>&lt;span&gt;Второй&lt;/span&gt;</span> параграф внутри блока</p>
</div>
main.js
JavaScript
$(document).ready(function () {
  $(".children").click(function () {
    $("*").css("background", "#fff");
    $("div").children("span").css("background", "red");
  });
  $(".find").click(function () {
    $("*").css("background", "#fff");
    $("div").find("span").css("background", "green");
  });
});

Результат нашего примера:

Отличие метода .find() от .children()
Отличие метода .find() от .children()