Smashing Magazine - Mastering jQuery

Andy Croxall

The explosion of JavaScript libraries and frameworks such as jQuery onto the front-end development scene has opened up the power of JavaScript to a far wider audience than ever before. It was born of the need expressed by a crescendo of screaming by front-end developers who were fast running out of hair to pull out to improve JavaScripts somewhat primitive API, to make up for the lack of unified implementation across browsers and to make it more compact in its syntax.

All of which means that, unless you have some odd grudge against jQuery, those days are gone you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.

All three of these methods are concerned with navigating upwards through the DOM, above the element(s) returned by the selector, and matching certain parents or, beyond them, ancestors. But they differ from each other in ways that make them each uniquely useful.

This simply matches the one immediate parent of the element(s). It can take a selector, which can be useful for matching the parent only in certain situations. For example:

$('span#mySpan').parent().css('background', '#f90');

$('p').parent('div.large').css('background', '#f90');

The first line gives the parent of #mySpan . The second does the same for parents of all

tags, provided that the parent is a div and has the class large .

Tip: the ability to limit the reach of methods like the one in the second line is a common feature of jQuery. The majority of DOM manipulation methods allow you to specify a selector in this way, so its not unique to parent() .

This acts in much the same way as parent() , except that it is not restricted to just one level above the matched element(s). That is, it can return multiple ancestors . So, for example:

$('li.nav').parents('li'); //for each LI that has the class nav, go find all its parents/ancestors that are also LIs

This says that for each

• that has the class nav , return all its parents/ancestors that are also
• s. This could be useful in a multi-level navigation tree, like the following:
  • Link 1
    • Sub link 1.1
    • Sub link 1.2
    • Sub link 1.3
  • Link 2
    • Sub link 2.1
    • Sub link 2.2

  Imagine we wanted to color every third-generation

• in that tree orange. Simple:

  $('#nav li').each(function() {

  if ($(this).parents('#nav li').length == 2)

  $(this).css('color', '#f90');

  });

  This translates like so: for every

• found in #nav (hence our each() loop), whether its a direct child or not, see how many
• parents/ancestors are above it within #nav . If the number is two, then this
• must be on level three, in which case color.
  closest(selector)

  This is a bit of a well-kept secret, but very useful. It works like parents() , except that it returns only one parent/ancestor. In my experience, youll normally want to check for the existence of one particular element in an elements ancestry, not a whole bunch of them, so I tend to use this more than parents() . Say we wanted to know whether an element was a descendant of another, however deep in the family tree:
  

  if ($('#element1').closest('#element2').length == 1)