Поиск дочерних элементов

.children()

Находит дочерние элементы. Метод имеет один вариант использования:

.children([selector]):jQuery1.0

Возвращает все дочерние элементы выбранных элементов. При необходимости, можно указать селектор selector для фильтрации результата.

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

$("div").children() вернет элементы, которые лежат непосредственно внутри div-элементов.
$("div").children(".bigBlock") вернет элементы класса bigBlock, которые лежат непосредственно внутри div-элементов.
$("#lArea").children(".lBlock") вернет элементы класса lBlock, которые лежат непосредственно внутри элемента с идентификатором lArea.

В действии

Выделим элементы, содержащиеся внутри элементов списка (и заодно узнаем, что нужно для приготовления суши):

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~style~gt~
    ul{list-style-type:none; margin-left:17px; padding:4px}
    li{margin:3px}
    .colmn{float:left; margin-right:20px; background-color: #eee;}
  ~lt~/style~gt~
  ~lt~script src="//code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~ul class="colmn"~gt~
    ~lt~li style="font-style:italic"~gt~Суши~lt~/li~gt~  
    ~lt~li~gt~Рыба~lt~/li~gt~
    ~lt~li~gt~Водросли~lt~/li~gt~
    ~lt~li~gt~Рис~lt~/li~gt~
    ~lt~li~gt~
	  Соус:
      ~lt~ul~gt~
        ~lt~li~gt~Уксус~lt~/li~gt~
        ~lt~li~gt~Соль~lt~/li~gt~
        ~lt~li~gt~Сахар~lt~/li~gt~
      ~lt~/ul~gt~
	~lt~/li~gt~
    ~lt~li~gt~Авокадо~lt~/li~gt~
    ~lt~li~gt~
	  Инвентарь:
      ~lt~ul~gt~
        ~lt~li style="font-style:italic"~gt~Приспособления~lt~/li~gt~
        ~lt~li~gt~Кастрюля~lt~/li~gt~
        ~lt~li~gt~"Коврик"~lt~/li~gt~
        ~lt~li~gt~Нож~lt~/li~gt~
      ~lt~/ul~gt~
      ~lt~ul~gt~
        ~lt~li style="font-style:italic"~gt~Приборы~lt~/li~gt~
        ~lt~li~gt~Тарелочки~lt~/li~gt~
        ~lt~li~gt~Пиалочки~lt~/li~gt~
        ~lt~li~gt~Палочки~lt~/li~gt~
      ~lt~/ul~gt~
	~lt~/li~gt~
  ~lt~/ul~gt~
  ~lt~script~gt~
    $("li").children().css("border", "1px solid red");
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • найти дочерние элементы
  • найти потомков
  • дочерние элементы
  • потомки
  • children()
  • .children