children()

.children( [ селектор ])

Возвращает: jQuery

Описание: Возвращает детей каждого элемента в наборе сответствующих элементов, опционально отфильтрованных селектором.

.children( [ селектор ] )

Добавлена в версию: 1.0

селектор

Строка

Строка, содержащая выражение для выбора соответствующих элементов.

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

Метод опционально принимает выражение селектора того же типа, который мы можем послать в функцию $(). Если селектор передан, элементы будут профильтрованны тестированием на соответствие.

Рассмотрим страницу с простым вложенным списком:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Если мы начнем со списка level-2, мы можем найти её детей:

$('ul.level-2').children().css('background-color', 'red');

Результатом данного вызова будет красный фон пунктов A, B, и C. Так как мы не предоставили выражение селектора, все дети будут являться частью возвращаемого объекта jQuery. Если бы мы предоставили выражение селектора, только соответствующие элементы из этих трех будут включены.

Примеры

Пример 1

Поиск всех потомков элемента по которому кликнул пользователь.

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });

  });
  </script>

  <style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
</head>
<body>
  <div id="container">
    <div>

      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>
    </p>
  </div>
</body>
</html>

Попробуйте сами

Example 2

Поиск всех потомков каждого элемента div.

$("div").children().css("border-bottom", "3px double red");

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>

<html>

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("div").children().css("border-bottom", "3px double red");
  });
  </script>

  <style>
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  </style>

</head>
<body>
  <p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>
</body>
</html>

Попробуйте сами

Пример 3

Поиск всех потомков, обладающих классом «selected», каждого элемента div.

$("div").children(".selected").css("color", "blue");

Результат выполнения кода выше:

Попробуйте сами

Пример 3 - Полный код:

<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("div").children(".selected").css("color", "blue");
  });
  </script>

  <style>
  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  </style>

</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>
    <p>And One Last Time</p>
  </div>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

children()

.children( [ селектор ])

.children( [ селектор ] )

Примеры

Пример 1

Пример 1 - Полный код:

Example 2

Пример 2 - Полный код:

Пример 3

Пример 3 - Полный код:

Комментарии