Inefficient jQuery usage warnings in PHPStorm IDE

jquery jquery-selectors performance
Scott picture Scott · Oct 1, 2012 · Viewed 23k times · Source

I recently upgraded my version of PHPStorm IDE and it now warns me about inefficient jQuery usage.

For example:

var property_single_location = $("#property [data-role='content'] .container");

Prompts this warning:

Checks that jQuery selectors are used in an efficient way. It suggests to split descendant selectors which are prefaced with ID selector and warns about duplicated selectors which could be cached.

So my question is:

Why is this inefficient and what is the efficient way to do the above selector?

I'd guess at:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Is this the right way?

Answer

MikeSchinkel picture MikeSchinkel · May 18, 2013

I had the same question today and was able to find a solution thanks to Scott Kosman here.

Basically the answer is to select IDs individually and then use .find(...) for anything below. So taking your example:

$("#property [data-role='content'] .container");

Changing it to this makes PhpStorm happy and can evidently be more than twice as fast:

$("#property").find("[data-role='content'] .container");

Related questions

jQuery hasClass() - check for more than one class

With: if(element.hasClass("class")) I can check for one class, but is there an easy way to check whether "element" has any of many classes? I am using: if(element.hasClass("class") || element.hasClass("class") ... ) Which isn't too bad, …

Read More
What is the fastest method for selecting descendant elements in jQuery?

As far is I know, there are a number of ways of selecting child elements in jQuery. //Store parent in a variable var $parent = $("#parent"); Method 1 (by using a scope) $(".child", $parent).show(); Method 2 (the find() method) $parent.find(".child").…

Read More
JQuery class selector vs id selector

I have 7 different buttons that all perform the same javascript function on click. should i use class selector or id selector. $("input.printing").on("click", function(event) { printPdf(event); }); or $("#package1Pdf").click(function(event) { printPdf(event); }); $("#package2Pdf").click(…

Read More