Jquery newbie: how to efficiently perform multiple actions on the same DOM element?

Question

I recently found out (here on stackoverflow :)) that when using jquery every time I write

$("...") 

a DOM search is performed to find matching items. My question is very simple: how to efficiently execute a series of actions (using beautiful jquery object methods) on the DOM element that I found with jquery? I am currently doing (for example):

 var previousHtml = $("#myDiv").html(); $("#myDiv").addClass("tangoClass"); $("#myDiv").html("bla bla bla"); //... 

Basically, I always referred to an element, writing $ ("# myDiv"). How can I repeatedly manipulate a DOM element (using jquery functions, not vanilla Javascript) in an efficient way? Does the following mean to avoid expensive DOM searches?

 var myDiv = $("#myDiv"); var previousHtml = myDiv.html(); myDiv.addClass("tangoClass"); myDiv.html("bla bla bla"); 

Or should I instead try to combine the jquery calls as much as possible, for example:

 var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call $("#myDiv").html("bla bla bla"); 

Thank you for understanding.:)

lara

Answer 1

No one has tied the jQuery performance rules , so I will call, as this is a great article and a must-read for new jQuery Developers!

As you will see, this confirms your suspicions: caching jQuery objects by storing them in variables is just as effective as chaining.

Answer 2

I also agree that chaining is the best method to use, but something else does not have an address here using .andSelf() ( 1 ) and .end() ( 2 ) when chaining.

Next, the "border" class is added for the div and p contained inside.

 $("div").find("p").andSelf().addClass("border"); 

Using .end() "resets" the selector

 $("div") .find("p").addClass("myParagraph").end() .find("span").addClass("mySpan"); 

---

Update: .andSelf() is deprecated and essentially renamed to .addBack() , use it in the same way.

Answer 3

Each time you use the jQuery function, it returns the full jQuery object from the original query. This allows you to combine actions together, so the actual request is executed only for the first time.

From your examples, it doesn't seem like you've ever used previousHtml, so you don't need to grab it at all. I think you can just do this:

 $("#myDiv").html('bla bla bla').addClass('tangoClass'); 

Answer 4

It depends on what functions you call for this element, since not all functions return a DOM element. However, if all the functions you must call will always return a DOM element, this can make your code more readable.

Answer 5

Yes, I would recommend using a chain, because jQuery methods usually return the element that you changed, so it does not need to be searched in the DOM again. And I find it more readable (you know what operations belong to that element).

Answer 6

both are the same.

 var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById, // wraps the DOMElement, returns the wrapper. myDiv.addClass("tangoClass"); // obviously reuses the object myDiv.html("bla bla bla"); // ditto 

the chain is exactly the same since jQuery methods return this , the object to which they are attached:

 myDiv .addClass("tangoClass") .html("bla bla bla") ; 

you can check this with (myDiv === myDiv.html("bla bla bla"))

to answer your question “which should I use”: DRY (Do not Repeat Yourself) will suggest a chain. just don't forget readability (don't allow many method calls on one line, my recipe for readability is higher)

Answer 7

Just because no one has mentioned this, using your first method will also work and save the DOM search.

However, the chain, as others have said, would be a more “correct” way of using the same element and applying different actions to it.

Good luck