jQuery traversing demo

Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast');

Download These Files

This sentence is in <div id="myid">. It is followed by a horizontal rule.

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

  • This is the first list item (<li>) in an unordered list (<ul>).
  • This is the second list item. It has a link in it.
  • This is the third list item. It has a class of "myclass otherclass"
  • This is the fourth list item. It has strong text and emphasized text.
    • second-level list item 1
    • second-level list item 2
  • This is the 5th list item. It has a element and a <span> with .myclass
  • This is the 6th list item. It has strong text and emphasized text.

<p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all.

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

Simple Functions

Cont of selected elements

alert($('div').length);

The get(x) function

var el = $('li').get(2);
$(el).toggleClass('highlight');

The index function

var el = $('li')[3];
$(el).toggleClass('highlight')

The slice(from) function

$('li').slice(2).toggleClass('highlight');

The slice(from,to) function

$('li').slice(2,4).toggleClass('highlight');

The not(exp) function

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

Filter Functions

Use of find(exp) function

$('li').find('.myclass')
    .toggleClass('highlight');

Use of filter(exp) function

$('li').filter('.myclass')
    .toggleClass('highlight');

Use of the is() and each() function

$('li').each(function() {
  if ($(this).is(':nth-child(2)') ) {
    $(this).toggleClass('highlight');
  } });

Some Advanced chaining

$('<li><span></span></li>')   // li
  .find("span")   // span
    .html("Matthias is a jQueryGeek")   // span
    .andSelf()   // span, li
      .addClass('highlight')  // span,li
    .end()   // span
  .end() // li
.appendTo('ul.internalList');