Search jQuery

jQuery Forum

Caching jQuery

in Using jQuery • 8 years ago

Hi,

I was wondering is it possible to cache the api of jQuery because I am using the same api every time for multiple elements?

For example.

$("#id1").css("display","none");
$("#id2").css("display","none");
$("#id3").css("display","none");
$("#id4").css("display","none");
$("#id5").css("display","none");

I know that you can assign all the selectors to one api, however I have a script which checks the url for specific words, so I was wondering is it possible to cache the api to improve performance?

Replies(6)

jakecigar

Re: Caching jQuery

8 years ago

There is no caching of methods. It’s all loaded and ready to use.

$(".ids).hide()

is much better, assuming you add class="ids" to those elements.

JΛ̊KE

Ryan Hawd..

Re: Caching jQuery

8 years ago

Wrong terminology. What you are asking has nothing to do with caching. And you don't cache "APIs". You cache jQuery objects.

Not cached:

$(".some-selector').hide();

$('.some-selector').show();

$('.some-selector').addClass('foo');

Cached:

var $someElements = $('.some-selector');

$someElements.hide();

$someElements.show();

$someElements.addClass('foo');

When we talk about "caching" jQuery objects, we mean saving them in variables so that they can be re-used later. It avoids the overhead of having to construct new identical jQuery objects over and over.

As to your original problem, as Jake illustrates, jQuery functions that DO or CHANGE something will apply to multiple elements, if the selector used selects multiple elements. You do not have to repeat yourself or write a loop. jQuery does it for you. This is a great convenience.

With your original markup, this would work:

$('#id1,#id2,#id3,#id4,#id5').hide();

Jake's solution is better. IDs are evil. Use a single CSS class that you apply to multiple elements.

IDs with appended numbers are especially evil, and almost always indicate that the code could be better refactored using a common CSS class instead. In the Ruby world, we'd say this "raises a smell". It's an indication of poorly-structured code that jumps right out at you and so bears investigation and re-thinking.

Note that jQuery functions that FETCH some information, though, return only a single value. It is the value associated with the FIRST matched element.

var html = $('#id1,#id2,#id3,#id4,#id5').html();

will return the HTML from the element with ID id1 . If you wanted to fetch all of them, then you'd have to write a loop.

jakecigar

Re: Caching jQuery

8 years ago

You are caching the selector. The question was about caching the methods,

JΛ̊KE

watusiware

Re: Caching jQuery

8 years ago

I think we are saying the same thing. I have no idea what "caching the methods" means. Do you? What carpetbag are the methods being stored in for later use?

I wanted to clarify what jQuery developers mean when they refer to "caching". It almost always means "caching selectors". .data() does a different kind of caching, but almost nobody uses the term in that case.

It's easier to communicate if we all use the same terminology. ;) "caching" is a quite generic term, but in the context of jQuery it almost always means one thing.

OP wants to apply a function to multiple elements. The easy way to do that is to select multiple elements and apply a function to that selector, as you showed above.

jakecigar

Re: Caching jQuery

8 years ago

In other languages, you might cache a dynamic method to reuse it. Just not in javaScript.

In javaScript I can cache selectors, data, images, and many more things. I can even cache functions.

I could try to cache a method with

var x = $("#foo").hide;

But that doesn’t work.

This is a usable example of caching the selector and using it in a semi-creative way.

var ids=$(".ids).hide()
//…
ids.eq(3).show()

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Caching jQuery

Replies(6)

Re: Caching jQuery

Re: Caching jQuery

Re: Caching jQuery

Re: Caching jQuery

Re: Caching jQuery

Re: Caching jQuery

Statistics

Tags

Actions