Say for example we wanted to select the following block of XHTML:

Hello
blank
Hello

We would use jQuery to select this code black as follows with a bit of JavaScript:

(function ($) {
    $().ready ( function () {
        var main = $('#main');
    });
})(jQuery);

So when the above snippet runs it would select the element with the id of “main” in this case it’s the main div element. So then to further drill down to be able to select elements within this jQuery object we would extend the previous snippet to the following:

(function ($) {
	$().ready ( function () {
		var main = $('#main');
		main.each ( function () {
			var odds = $(this).find ('.odd');
			odds.each ( function () {
				$(this).append ('
World


');
			});
		});
	});
})(jQuery);

Doing this will select all of the elements with the class “odd” and append two div’s to it. Obviously you could just select all of the “odd” elements in this document and get the same result but if you where working with multiple tables with the same class names and you only wanted to manipulate one this would be a useful technique.

Hope this helps. For further information about selectors please read my article jQuery selectors and attribute selectors reference and examples.