Working With jQuery Objects

Selections Are jQuery Objects

A selector returns a jQuery object: an array-like wrapper around DOM nodes with all jQuery methods attached.

Iterating

$('li').each(function (index, element) {
  console.log(index, element.textContent);
});

Inside each(), this is the raw DOM element; wrap it with $() when you want jQuery methods.

Indexing Into the Selection

var el = $('li')[0];           // raw DOM element
var $el = $('li').eq(2);       // third element as jQuery object
var count = $('li').length;     // number of matches

Converting Between DOM and jQuery

var dom = $('#box').get(0);     // jQuery -> DOM
var $dom = $(dom);               // DOM -> jQuery

Chaining and .end()

$('#list').find('li').addClass('hot').end().addClass('highlighted');

.end() steps the chain back to the previous selection (#list).

Key Points

• Everything you select is a jQuery object over DOM nodes.
• each() iterates; this is the native element inside.
• .get()/.eq()/indexing move between wrapper and DOM.
• Chaining and .end() keep expressions compact.