I just came across a very interesting question in the jQuery Google group asking about how to select elements that are inside of a jQuery object. After posting my response there I thought I would follow it up with a new jQuery article.
Say for example we wanted to select the following block of XHTML:
HelloblankHello
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.
Tags: 1.3, DOM, JavaScript, jQuery
Categories: Articles, Blogs, JavaScript, Technical, jQuery
Maja Williams has written 12 articles.
Other articles by this author Maja Williams
