1

I wonder if there's a way to combine a JS selector with jQuery functions methods like that:

document.getElementsByClassName("example").on("click", function() {
  ...
});
j08691
  • 204,283
  • 31
  • 260
  • 272
hadakasir
  • 13
  • 3
  • 1
    @31piy I don't think that's a good duplicate, as the upvoted answer doesn't mention anything about DOM APIs that return element *lists*. – Pointy Dec 12 '17 at 15:57
  • Agreed with @Pointy - subtle but all code is that way and this specifically addresses that. Voted to re-open. – Mark Schultheiss Dec 12 '17 at 16:14
  • Just to maintain visibility here is the other question https://stackoverflow.com/q/625936/125981 – Mark Schultheiss Dec 12 '17 at 16:18
  • "jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it. " https://api.jquery.com/class-selector/ and where this comes into play http://api.jquery.com/jquery/#jQuery-elementArray – Mark Schultheiss Dec 12 '17 at 16:50

1 Answers1

1

You can pass your node list to the jQuery constructor:

$(document.getElementsByClassName("example")).on("click", function() {
  // ...
});

I don't know for sure how long jQuery has recognized when node lists are passed to the constructor, but it seems to work now.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • wow man, thank you! But would this have a performance benefit than the usual jquery selector? because that's actually the reason I want to use JS instead(seen many reviews on jquery bad impact on performance etc) – hadakasir Dec 12 '17 at 15:58
  • 1
    @hadakasir up-to-date releases of jQuery do a pretty good job of using native browser APIs when possible, but there's a small performance penalty. Personally I use jQuery almost exclusively, and modern browser environments perform so well I never have performance problems I can trace to that. – Pointy Dec 12 '17 at 16:00
  • Agree with Pointy here, `$('.example').on` would be better here perhaps. – Mark Schultheiss Dec 12 '17 at 16:12
  • @MarkSchultheiss what do you mean? I thought the performance penalty Pointy was talking about was about using jQuery, not otherwise. Or perhaps using JS as selector inside of jquery indeed worse than using jquery's selector? :| – hadakasir Dec 12 '17 at 16:30
  • @hadakasir there is definitely a penalty, but for most code it's so small it doesn't matter. – Pointy Dec 12 '17 at 16:31
  • @hadakasir - Using JS code inside, extra code must run, but also more to maintain. As denoted by Pointy this is really micro optimization - unless you are dealing with older browsers or really do need that extra small bit inside some larger context like a huge loop you likely will not see a difference, there ARE other things more likely to impact you that are out of this question scope. – Mark Schultheiss Dec 12 '17 at 16:36
  • @MarkSchultheiss it's a bit confusing tho, as I was thinking that jQuery will recognize the JS inside and won't go through its own loop(logic) to process it further. Pointy it was for you as well, I just can't mark two people here :) – hadakasir Dec 12 '17 at 16:43
  • @Pointy penalty for using JS inside jquery, correct? – hadakasir Dec 12 '17 at 16:44
  • @hadakasir well what I mean is this: jQuery adds some cost to the native browser APIs, but it's generally a *tiny* cost. And your assumption is wrong about jQuery "recognizing the native JS" — that's simply not possible for jQuery to do because JavaScript fundamentally does not work that way. – Pointy Dec 12 '17 at 16:59
  • Basically the answer to your original question is "yes", but there's really no point in doing that. If you have code that seems too slow, an "optimization" like this almost certainly won't make any difference. – Pointy Dec 12 '17 at 17:00
  • Thank you for clarifying this, @Pointy! much appreciate :) – hadakasir Dec 12 '17 at 17:07