Обход элементов в jQuery - Потомки

При помощи jQuery можно совершать проход вниз по дереву DOM и находить потомков заданного элемента.

Потомки - это дети, внуки, правнуки и т.д.

Проход вниз по дереву DOM

Для прохода вниз по дереву DOM есть два метода jQuery:

• children()
• find()

jQuery метод children()

Метод children() возвращает все прямые потомки выбранного элемента.

Этот метод проходит только по первому уровню вниз по дереву DOM.

В следующем примере находятся элементы <div> и возвращаются прямые потомки каждого такого элемента:

$(document).ready(function(){
  $("div").children();
}); 

Также, можно указать необязательный параметр, чтобы фильтровать поиск потомков.

В следующем примере возвращаются все элементы <p> с классом "first", которые являются прямыми потомками элементов <div>:

$(document).ready(function(){
  $("div").children("p.first");
}); 

jQuery метод find()

Метод find() возвращает все потомки выбранного элемента вплоть до последнего.

В следующем примере возвращаются все элементы <span>, которые являются потомками элементов <div>:

$(document).ready(function(){
  $("div").find("span");
}); 

В следующем примере возвращаются вообще все потомки элементов <div>:

$(document).ready(function(){
  $("div").find("*");
});