Метод children(‘селектор’)
Пусть у нас есть такая html разметка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ol class="MainMenu"> <li class="submenu1">First Group - Numbers <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </li> <li class="submenu2">Second Group - Fruits <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> </li> <li>Third Group - Undefined</li> </ol> |
Применим в скрипте метод children() без селектора
|
1 2 3 4 5 6 |
$(function(){ var lists = $('ol').children(''); lists.each(function(index, elem){ console.log(elem.innerHTML); }); }); |
Получим примерно следующий ответ в консоли – как видно, во множество вошли “все дети”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
First Group - Numbers <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> Second Group - Fruits <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> Third Group - Undefined |
Теперь попробуем ограничить множество, указав в качестве параметра селектор
|
1 2 3 4 5 6 |
$(function(){ var lists = $('ol').children('.submenu1'); lists.each(function(index, elem){ console.log(elem.innerHTML); }); }); |
Тогда ответ в консоли будет следующим
|
1 2 3 4 5 6 |
First Group - Numbers <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> |
Методы next(), prev()
Работают только для сиблингов – то есть, элементов, находящихся на одном уровне (не для родителей или детей). Для той же разметки применим данные методы
next()
|
1 2 3 4 5 6 |
$(function(){ var lists = $('li.submenu1').next(); // <<< lists.each(function(index, elem){ console.log(elem.innerHTML); // Выдаст }); }); |
Выдаст в консоли
|
1 2 3 4 5 6 7 |
Second Group - Fruits <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> |
И наоборот, метод prev()
|
1 2 3 4 5 6 |
$(function(){ var lists = $('li.submenu2').prev(); lists.each(function(index, elem){ console.log(elem.innerHTML); }); }); |
Выдаст
|
1 2 3 4 5 6 |
First Group - Numbers <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> |
Есть также методы nextAll,nextUntil,prevAll,prevUntil – думаю, их назначение понятно из названия.
Метод siblings()
Данный метод позволяет получить не только тех, кто спереди или сзади, а все элементы, кроме данного.
|
1 2 3 4 5 6 |
$(function(){ var lists = $('li.submenu2').siblings(); lists.each(function(index, elem){ console.log(elem.innerHTML); }); }); |
Код выше выдаст в консоли
|
1 2 3 4 5 6 7 8 9 10 |
First Group - Numbers <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> Third Group - Undefined |
Методы parent(), parents()
Здесь, думаю очевидно, но тем не менее, посмотрим на пример
|
1 2 3 4 5 6 |
$(function(){ var lists = $('.submenu2').parent(); lists.each(function(index, elem){ console.log(elem.tagName); // <<<<Выдаст ol }); }); |
Метод parents() выдаст всех родителей, вплоть до <html></html>, поэтому глубину этого метода можно ограничить селектором, например так
|
1 |
parents('body'); |
В принципе, основные методы мы рассмотрели, более детально можно изучить в документации.