DOM Traversing

.filter(selector) - A

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

a paragraph

$('li').filter(':even').toggleClass('highlight');

.filter(selector) - B

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

a paragraph

$('li').filter(':gt(0):even').toggleClass('highlight');

.filter(selector) - C

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

a paragraph

$('li').filter(':even:gt(0)').toggleClass('highlight');

.filter(function) - A

  • list item 1 - one strong
  • list item 2 - two strongs
  • list item 3

a paragraph

$('li').filter(function(index) { return $("strong", this).length == 1; }).toggleClass('highlight');

.filter(function) - B

  • list item 1 - one strong
  • list item 2 - two strongs
  • list item 3
  • list item 4
  • list item 5
  • list item 6

a paragraph

$('li').filter(function(index) { return index % 3 == 2; }).toggleClass('highlight');

.not(selector) - A

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

a paragraph

$('li').not(':even').toggleClass('highlight');

.not(selector) - B

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

a paragraph

$('li').not(':odd:first').toggleClass('highlight');

.not(selector) - C

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

a paragraph

$('li').not(':first:odd').toggleClass('highlight');

.not(element)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

a paragraph

$('li').not(document.getElementById('notli')).toggleClass('highlight');

.eq()

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('li').eq(2).toggleClass('highlight');

.slice(start)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('li').slice(2).toggleClass('highlight');

.slice(start, end)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('li').slice(1, 3).toggleClass('highlight');

.add(selector)

  • list item 1
  • list item 2
  • list item 3

a paragraph

$('li').add('p').toggleClass('highlight');

.add(elements)

  • list item 1
  • list item 2
  • list item 3

a paragraph

$('li').add(document.getElementById('addp')).toggleClass('highlight');

.find(selector)

  • item i
  • item ii
    • item a
    • item b
      • item 1
      • item 2
      • item 3
    • item c
  • item iii
$('li.item-ii').find('li').toggleClass('highlight');

.children(selector)

  • item i
  • item ii
    • item a
    • item b
      • item 1
      • item 2
      • item 3
    • item c
  • item iii
$('ul.level-2').children().toggleClass('highlight');

.parents(selector)

  • item i
  • item ii
    • item a
    • item b
      • item 1
      • item 2
      • item 3
    • item c
  • item iii
$('li.item-a').parents('ul').toggleClass('highlight');

.parent(selector)

  • item i
  • item ii
    • item a
    • item b
      • item 1
      • item 2
      • item 3
    • item c
  • item iii
$('li.item-a').parent('ul').toggleClass('highlight');

.siblings(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('.third-item').siblings().toggleClass('highlight');

.prev(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('.third-item').prev().toggleClass('highlight');

.prevAll(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('.third-item').prevAll().toggleClass('highlight');

.next(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('.third-item').next().toggleClass('highlight');

.nextAll(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('.third-item').nextAll().toggleClass('highlight');

.hasClass(class)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('li').each(function() { if ( $(this).hasClass('third-item') ) { $(this).toggleClass('highlight'); } });

.is(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('li').each(function() { if ($(this).is(':nth-child(2)') ) { $(this).toggleClass('highlight'); } });

.end()

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
$('ul.first') .find('.item-1').toggleClass('highlight') .end() .find('.item-3').toggleClass('highlight');