11

DOM Traversing

a paragraph

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

$('#example-traversing-filter1 li').filter(':even').addClass('highlight');

.filter(selector) - B

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

a paragraph

$('#example-traversing-filter2 li').filter(':gt(0):even').addClass('highlight');

.filter(selector) - C

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

a paragraph

$('#example-traversing-filter3 li').filter(':even:gt(0)').addClass('highlight');

.filter(function) - A

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

a paragraph

$('#example-traversing-functionfilter2 li').filter(function(index) { return $("strong", this).length == 1; }).addClass('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

$('#example-traversing-functionfilter2 li').filter(function(index) { return index % 3 == 2; }).addClass('highlight');

.not(selector) - A

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

a paragraph

$('#example-traversing-not1 li').not(':even').addClass('highlight');

.not(selector) - B

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

a paragraph

$('#example-traversing-not2 li').not(':odd:first').addClass('highlight');

.not(selector) - C

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

a paragraph

$('#example-traversing-not3 li').not(':first:odd').addClass('highlight');

.not(element)

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

a paragraph

$('#example-traversing-notelement li').not(document.getElementById('notli')).addClass('highlight');

.contains("text")

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

a paragraph

$('#example-traversing-contains li').contains('item 2').addClass('highlight');

.eq()

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-eq li').eq(2).addClass('highlight');

.lt()

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-lt li').lt(2).addClass('highlight');

.gt()

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-gt li').gt(2).addClass('highlight');

.add(selector)

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

a paragraph

$('#example-traversing-add li').add('p').addClass('highlight');

.add(html)

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

please

$('#example-traversing-addhtml li').add('<p>please</p>').addClass('highlight');

.add(elements)

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

a paragraph

$('#example-traversing-addelements li').add(document.getElementById('addp')).addClass('highlight');

.is(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
if ( $('#example-traversing-is strong').parents('div:eq(0)').is('.wrap-paragraphs') ) { $('strong', this).addClass('highlight'); }

.find(selector)

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
$('#example-traversing-find li.item-ii').find('li').addClass('highlight');

.children(selector)

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
$('#example-traversing-children ul.level-2').children().addClass('highlight');

.parents(selector)

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
$('#example-traversing-parents li.item-a').parents('ul').addClass('highlight');

.parent(selector)

  • I
  • II
    • A
    • B
      • 1
      • 2
      • 3
    • C
  • III
$('#example-traversing-parent li.item-a').parent().addClass('highlight');

.siblings(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-siblings .third-item').siblings().addClass('highlight');

.prev(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-prev .third-item').prev().addClass('highlight');

.next(selector)

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
$('#example-traversing-next .third-item').next().addClass('highlight');

.end()

  • list item 1
  • list item 2
  • list item 3
  • list item 1
  • list item 2
  • list item 3
$('#example-traversing-end ul.first').find('.foo').addClass('highlight').end().find('.bar').addClass('highlight');