Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Avoid Bare Class Selectors In jQuery

DZone's Guide to

Avoid Bare Class Selectors In jQuery

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

It just happened again: I was looking at someone else's jQuery and I came across something like this:

$('.button').click(function() { /* do something */ });

This is a classic case of "just because you can, doesn't mean you should." This little bit of jQuery will, indeed, find every element on a page with a class of "button", but that's exactly the problem: it has to look at every element on the page to figure out which ones match the selector. It seems short and sweet, like so much of jQuery is, but on a page with a lot of elements, this selector can actually take a non-trivial amount of time to run.

There are a few ways to avoid this:

  • If the element you're after has an ID attribute, use it. That's the single-fastest way to find an element. However, don't gratuitously add ID attributes to elements; the other methods below are perfectly good.
  • Specify the type of element you're after. For example, $('input.button'). This will tell jQuery that it's only looking for inputs, so it can disregard anything on the page that isn't an input. If you're looking for multiple element types, tell jQuery that: $('input.button, a.button')
  • Give jQuery some information about where to look for the element. For example: $('#myForm .button')
  • Use an element you've already found to tell jQuery where to find the element:

var $ul = $('#myUnorderedList')
var $li = $ul.find('.selected');

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Rebecca Murphy. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}