Jquery Best Practice - Putting DOM Element in Variable regardless of how many times it was used

Wesley Brian Lachenal Published at Dev

Wesley Brian Lachenal

While browsing for some best practices on Jquery, I stumbled into this one.

Reference: http://gregfranko.com/jquery-best-practices/#/13

// Stores the live DOM element inside of a variable
  var elem = $("#elem");

  // Set's an element's title attribute using it's current text
  elem.attr("title", elem.text());

  // Set's an element's text color to red
  elem.css("color", "red");

  // Makes the element fade out
  elem.fadeOut();

It says it's the best to CACHE YOUR SELECTORS IN VARIABLES

Then while working, I thought to myself, do I really have to put #current-contact-info and #list-contact-form on a variable?

Since I'm just calling it once, does it affect the performance?

Option 1:

$("#edit-contact-list").on("click", function() {
    $("#current-contact-info").addClass("hide");
    $("#list-contact-form").removeClass("hide");
});

Or option 2 is the best way regardless of how many times it was called?

Option 2:

$("#edit-contact-list").on("click", function() {

    var current_contact_info = $("#current-contact-info");
    var list_contact_form = $("#list-contact-form");

    current_contact_info.addClass("hide");
    list_contact_form.removeClass("hide");
});

I was kind of insecure on the amount of line of code though.

xyz

Always consider simplicity and readability along with performance/best practices. Storing a element in variable is of no use if it will be used only once, also it wont help in making code more simple/readable.
I always prefer

 $("#current-contact-info");.addClass("hide");
 $("#list-contact-form").removeClass("hide");

over

var current_contact_info = $("#current-contact-info");
var list_contact_form = $("#list-contact-form");

current_contact_info.addClass("hide");
list_contact_form.removeClass("hide");

If you are worried about lines of code (it deosnt really matter though), you can achieve it in 1 line. Use toggleClass over addClass/removeClass and use OR operator in selector

 $("#current-contact-info, #list-contact-form").toggleClass("hide");

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-03-15

Comments

0 comments

From Dev

Is it possible for a macro to expand to code that will be executed exactly once when a program starts, regardless of how many times it's used?

From Dev

Related Related

Article