jQuery Combining selectors


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>),

  1. Simple $('parent child')

    >> $('ul.parentUl li')

    This gets all matching descendants of the specified ancestor all levels down.

  2. > - $('parent > child')

    >> $('ul.parentUl > li')

    This finds all matching children (only 1st level down).

  3. Context based selector - $('child','parent')

    >> $('li','ul.parentUl')

    This works same as 1. above.

  4. find() - $('parent').find('child')

    >> $('ul.parentUl').find('li')

    This works same as 1. above.

  5. 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')