Example
Consider following DOM Structure
<ul class="parentUl">
<li> Level 1
<ul class="childUl">
<li>Level 1-1 <span> Item - 1 </span></li>
<li>Level 1-1 <span> Item - 2 </span></li>
</ul>
</li>
<li> Level 2
<ul class="childUl">
<li>Level 2-1 <span> Item - 1 </span></li>
<li>Level 2-1 <span> Item - 1 </span></li>
</ul>
</li>
</ul>
Descendant and child selectors
Given a parent <ul> - parentUl find its descendants (<li>),
-
Simple
$('parent child')>>
$('ul.parentUl li')This gets all matching descendants of the specified ancestor all levels down.
-
>-$('parent > child')>>
$('ul.parentUl > li')This finds all matching children (only 1st level down).
-
Context based selector -
$('child','parent')>>
$('li','ul.parentUl')This works same as 1. above.
-
find()-$('parent').find('child')>>
$('ul.parentUl').find('li')This works same as 1. above.
-
children()-$('parent').find('child')>>
$('ul.parentUl').children('li')This works same as 2. above.
Other combinators
Group Selector : ","
Select all <ul> elements AND all <li> elements AND all <span> elements :
$('ul, li, span')
Multiples selector : "" (no character)
Select all <ul> elements with class parentUl :
$('ul.parentUl')
Adjacent Sibling Selector : "+"
Select all <li> elements that are placed immediately after another <li> element:
$('li + li')
General Sibling Selector : "~"
Select all <li> elements that are siblings of other <li> elements:
$('li ~ li')
