0

I had an argument with a colleague of mine about element selection in jQuery.

Here is an example code:

$(function(){
  $("body").on("submit", "#myForm", function(e){
    e.preventDefault();
    
    // here which selector would be quicker?
    var randomVar = $(this).find("#myText").val(); // this one
    var randomVar2 = $("#myText").val(); // or this one
    
    console.log(randomVar);
    console.log(randomVar2);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>imagine this div has a lot of content and the HTML file is about 400 lines with many elements</div>

<form id="myForm">
  <input type="text" id="myText" />
  <input type="text" id="myText2" />
  
  <input type="submit" />
</form>
</body>

He stated that using $(this).find("#id") would be quicker as it only searches within the <form> tag for the id. I was not sure exactly if that would be faster, assuming that the normal select by id $("#id") works with O(1) complexity as a dictionary get key would work.

I tried reading through jQuery's docs about both selectors, but did not find any time complexities or anything that points to how fast those 2 perform. So my question is which selector would be better and quicker to use $(this).find("#id") or $("#id")? Thank you in advance for your help!

N. Ivanov
  • 1,795
  • 2
  • 15
  • 28
  • Why do you need `$(this).find("#id")`? as Identifiers must be __unique__. So `$("#id")` is sufficent – Satpal Feb 13 '18 at 10:49
  • 1
    You could set up a test on https://jsperf.com/ and test it yourself – empiric Feb 13 '18 at 10:49
  • Likely details of the HTML document, which browser, and hardware will be bigger factors. Have you considered creating a brnchmark that is relevant to you? – Richard Feb 13 '18 at 10:50
  • 1
    IDs have to be unique within the document, and document probably as a dictionary for them, therefore `document.getElementById(id)` is likely the fastest, and `document.querySelector('#id')` is probably the fastest follow-up. If you do it using jQuery, `$('#id')` is likely the fastest, because it has the least jQuery specific magic, and can pass the query to the DOM right away. But to be sure you should benchmark it. When you do, make sure to include not only the two jQuery variants, but also the native variants I mentioned. But beware when you read the results, you may shit bricks. – GolezTrol Feb 13 '18 at 10:53
  • 4
    Really, if this is only for a single action in a page don't spend your time on it. Use the #id selector and move on :-) You might save less than a millisecond and you just spent at least 10 minutes of your life on this. ;-) – Jørgen Feb 13 '18 at 10:53
  • @Satpal I didn't need it I would always use `$("#id")`. I asked my colleague why he had it written with the `$(this).find()` and was confused as his statement did not make any sense. I was wondering whether I am missing something. Anyway thank you for your answer! – N. Ivanov Feb 13 '18 at 10:54
  • @empiric I will do. Thank you for your comment! – N. Ivanov Feb 13 '18 at 10:55
  • 1
    @N.Ivanov Using `$(this).find()` could potentially provide better abstraction in case ids weren't used. – Ilia Ross Feb 13 '18 at 10:56
  • @GolezTrol thank you for your comment, that was exactly what I was thinking as well, but my colleague was trying to convince me otherwise. I guess he was wrong. Thanks! – N. Ivanov Feb 13 '18 at 10:56
  • @Jørgen Thank you for your reply. I just got slightly annoyed by my colleague's statement and decided to put it to the test, so that I can defend my case that his code could have been improved. Thanks! – N. Ivanov Feb 13 '18 at 10:57

2 Answers2

2

There are lot of examples and measurements on jsPerf about performance counters of different actions. For example this one https://jsperf.com/jquery-find-vs-context-sel/38

Also you can prepare your own scenario and run it in different browsers to check exactly your case, to have measurements for your special case.

VadimB
  • 5,533
  • 2
  • 34
  • 48
  • I already did setup a test on jsperf as @empiric suggested in the comments. Would you mind giving him credit as well, as he was the first to suggest that. Thanks – N. Ivanov Feb 13 '18 at 11:04
  • Also wanted to share my results, indeed the direct ID selector is faster based on the jsperf results. Thanks! – N. Ivanov Feb 13 '18 at 11:05
-3

Both of the functions are of same complexity because both are one and the same functions.

$(this).find("#myText").val();

is same as

$("#myText").val();

Ref : How to get the children of the $(this) selector?

check the answer by gnarf

Daniel Alder
  • 5,031
  • 2
  • 45
  • 55
Sarav
  • 139
  • 1
  • 13
  • 1
    Gnarf mentions the second parameter. You don't use it. He is saying that `$(x).find('y')` is the same as `$('y', x)`, which may be the case. Since you omit the context, you're saying that `$(x).find(`y)` is the same as `$('y', d)`, where `d` is the default context, the document, and `x` is a specific subelement of that document. – GolezTrol Feb 13 '18 at 10:58