Jquery.get() - Practical Uses?

January 30, 2024 Post a Comment

I am trying to understand why you would use jQuery.get() and jQuery.get(index). The docs say it is to convert the jQuery selection to the raw DOM object instead of working with th

Solution 1:

It happens often when you want to call a native JS method on an element.

//submitting a form...
$('#mySearchForm').get().submit();

Solution 2:

Sometimes you're using jQuery in noConflict mode and you want to do something like:

var element = jQuery('#jquery_selectors .are > .awesome[and=fast]').get(0);

And then do something in prototype:

$(element).whatever();

Solution 3:

This may come in handy when doing something like (psuedocode):

a = $("div").get()
ajaxsend(a)

There are times when you may need to pass the actual DOM object to other functions, which may not be able to handle the jQuery object.

Solution 4:

This is useful for accessing any JavaScript method that isn't exposed through jQuery. For example, before jQuery supported offset(), I would typically use get() like this:

var offTop = $(element).get(0).offsetTop;

For another example, I used this recently to determine the scrollHeight of an element.

var scrollHeight = $(element).get(0).scrollHeight;

This can also be written as:

var scrollHeight = $(element)[0].scrollHeight;

Solution 5:

Cody Lindley (jQuery Team Member) has a great example of why you would use get()

If you ever need to cache a set of elements, because you are about to remove them, the jQuery get() method is really handy. For example, in the code below I am saving all my <li> elements on the page in an array, removing them, and then adding them back into the page using this array. Make sense?

<html><head><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script></head><body><ul><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li></ul><script>var test = $('ul li').get();

$('ul').empty();

$.each(test, function(){ $('ul').append('<li>'+$(this).html() + ' new</li>'); });

</script></body></html>

JavaScript Site