jQuery Minute™

Back in May of 2008 I posted about how to dynamically call a jQuery function and the practical use in adding or removing a class in one fell swoop. Since that post the toggleClass method has been updated to accept a second argument, a boolean value to signify adding or removing a class.

First the classic toggle class example:

1

$('body').toggleClass('blue');

Which just as the method describes will add the class “blue” if it doesn’t exit or remove it if it does.

In the next example we make use of addClass or removeClass

1
2
3
4
5

if ( $('body').hasClass('makeBlue') ) {
    $('body').removeClass('blue');
} else {
    $('body').addClass('blue');
}

Which has the same result and function as our first example with the difference that we’re adding or removing a class based upon the condition of body having the class “makeBlue”.

So here is an updated example making use of toggleClass along with the second argument that when true adds the class and conversely if false removes the class.

1
2

var addBlue = $('body').hasClass('makeBlue');
$('body').toggleClass('blue', addBlue );

And the final reduced version:

1

$('body').toggleClass('blue', $('body').hasClass('makeBlue') );

Cheers,
- Jonathan

So how many times have you done the following:

1
2
3
4
5
6

var elm = $('.selector');
if ( elm.hasClass('selectedElement') ) {
    elm.removeClass('abc');
} else {
    elm.addClass('abc');
}

One alternative to the above example is to use jQuery’s toggleClass() method, but toggleClass does exactly that, toggles the class without a way for us to know the current state.

So now to the point of this post, accessing a jQuery function using associative array notation. Here’s an example of a typical jQuery operation:

1
2

// Call addClass('abc') on all divs
$('div').addClass('abc');

Here’s the same jQuery operation using associative array notation.

1
2

// Call addClass('abc') on all divs using associative array notation
$('div')['addClass']('abc');

Now the refactored example from the beginning of this post:

1
2

var elm = $('.selector');
elm[ ( elm.hasClass('selectedElement') ? 'remove' : 'add' ) + 'Class' ]('abc');

Here’s some additional links on JavaScript objects as Associative Arrays:

• www.quirksmode.org/js/associative.html
• Search Google for “javascript as associative arrays”

I saw on this as part of the jQuery UI post on Ajaxian today, jQuery 1.2.3 was quietly released last night.

jQuery UI Google Groups Post

Here you go:

code.jquery.com/jquery-1.2.3.js
code.jquery.com/jquery-1.2.3.min.js
code.jquery.com/jquery-1.2.3.pack.js

There was a recent thread on the jQuery discussion group in that there was a need for looping through a series of elements and dynamically binding an event. An issue was brought up with closures and the arguments for dynamic binding of functions. Brandon Aaron provided an elegant solution that makes use of jQuery’s internal each() function. Let’s jump in!

So here’s a paraphrase of Brandon’s code:

Example 1:
jQuery.each( [0,1,2,3,4], function(index, item){
// Your code
});

At first glance this may look the same as your standard iteration code using each but it differs slightly and that is where the benefit is. Let’s look at using the standard each method on a jQuery object:

Example 2:
$(‘selector’).each(function(index){
// Your code
});

In this example jQuery internally manages the collection (array) of matched elements by the selector.

But, by using jQuery’s internal .each() method (Example 1) we’re able to pass in an arbitrary array in which each item will have the callback executed. An elegant solution to your typical for ( i ) loop. Your callback can accept two arguments: index, item where index is the numerical zero based index in the array of the current item and item is the value of the current array. Also worth noting is that by returning false from you callback you can stop iteration over the array (this is the same as using a break; statement in a for loop).

Happy coding!

Welcome jQuery newbies! I’m writing a quick post here to help clarify some differences between the parent() and parents() methods.

Given the following HTML:
<html>…<body><div class=”one”><div class=”two”><p><span>Some text</span></p></div></div></body></html>

$(‘span’).parent() will select the <p> tag such that the element set in the jQuery object is [span].

$(‘span’).parents() will select all parent tags such that the element set in the jQuery object is [p, div.two, div.one, body, html].

So parent() will select the first parent element while parents() will select all elements straight up the DOM tree.

Now jQuery has some great flexibility in that you could do that following:

$(‘span’).parents().filter(‘div’) which would result in [div.two, div.one]. jQuery makes it even easier as the parent() and parents() methods support filtering built in so the above can be reduced to:

$(‘span’).parents(‘div’) giving you [div.two, div.one].

Let’s continue with one more example, let’s say that you only need the first div in the parent DOM tree, jQuery to the rescue $(‘span’).parents(‘div:eq(0)’) will give you [div.two]

-Jonathan

A feature often over looked is namespacing your events in jQuery.

jQuery added in support for $(...).bind('event.namespace', fn). This is primarily useful for plugin authors who may bind numerous events to elements and want to remove only their events without needing to keep a pointer to the function they bound. So for example, you can do: $(...).bind('click.myNS', function(){...}); $(...).unbind('click.myNS'); which will unbind the click event with the ‘myNS’ name space.

For more on this read an entry over at Learning jQuery:
www.learningjquery.com/2007/09/namespace-your-events

Happy eventing!
-Jonathan

jQuery 1.2.2 has been released and features 150 bug fixes and improvements.

jquery.com/blog/2008/01/15/jquery-122-2nd-birthday-present/

As from the jquery-dev google groups, jQuery 1.2.2 is in beta stage:

John Resig’s Beta Release Post -
Get jQuery 1.2.2b.js

Be sure to read John’s Post about how to test and submitting bugs!

• Ask a jQuery Question
• About jQuery Minute
• Follow jqueryminute
• RSS Feed
• RSS Feed (with Comments)
• Subscribe by Email