Given the following HTML:

<ul>
<li>Item 1</li>
<li class=”hello”>Item 2</li>
<li class=”hello” id=”three”>Item 3</li>
<li class=”hello”>Item 4</li>
<li>Item 5</li>
<li class=”hello”>Item 6</li>
</ul>

If you needed to select the immediate siblings of #three that matched the class .hello (so the resulting element set would be Item 2, Item 3, Item 4) there isn’t an easy way to do this. jQuery provides a prev() and prevAll() methods (as well as their next() counter parts) but that would return all of the elements. Here’s a jQuery immediateSiblings function to take care of this for us:

$(’#three’).immediateSiblings(’li.hello’)

Here’s the code for the plugin:

/*
* immediateSiblings 1.0.0 (2008-07-14)
*
* Copyright (c) 2006,2007 Jonathan Sharp (http://jdsharp.us)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://jdsharp.us/
*
* Built upon jQuery 1.2.6 (http://jquery.com)
*/
$.fn.immediateSiblings = function(selector) {
var siblings = [];
if ( this.length > 0 ) {
this.each(function() {
var elm = $(this);
while ( elm.prev().is( selector ) ) {
elm = elm.prev();
siblings.unshift( elm[0] );
}
siblings.push( this );
var elm = $(this);
while ( elm.next().is( selector ) ) {
elm = elm.next();
siblings.push( elm[0] );
}
});
}
return this.pushStack( $.unique( siblings ) );
};

Cheers,
-Jonathan

I was recently faced with the problem of setting focus to the next input field. The challenge was that I didn’t know what that field was. So given an input field, find the next logical (in the order of the DOM) input field and set focus. I came up with the following jQuery function (plugin) to accomplish this:


$.fn.focusNextInputField = function() {
return this.each(function() {
var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
var index = fields.index( this );
if ( index > -1 && ( index + 1 ) < fields.length ) {
fields.eq( index + 1 ).focus();
}
return false;
});
};

The use is as follows:

$( 'current_field_selector' ).focusNextInputField();


Let’s break this code down some:

$.fn.focusNextInputField = function() {

Start off by adding a new jQuery function/plugin

return this.each(function() {

Given a set of elements (this => jQuery object), iterate over them (we’ll return false which stop iteration after the first element.)

var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');

Walk up the DOM tree (parents) until we find either the first form element or reach the body tag. Now find all button,input,textarea and select elements.

var index = fields.index( this );

Find out if our current DOM element (this) is in the jQuery collection. Index will return -1 if it is not.

if ( index > -1 && ( index + 1 ) < fields.length ) {

See if we have a match and make sure we aren’t the last element

fields.eq( index + 1 ).focus();

Select the next input field ( index + 1 ) and set focus to it.

}
return false;

Return false so we stop iteration after this element. So if you call $(…).focusNextInputField() with multiple elements, it will only set focus to the next input field of the first element.

Good luck & enjoy!


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:


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


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

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


Now the refactored example from the beginning of this post:

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


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

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

jQuery UI Google Groups Post

Here you go:

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

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!

http://ejohn.org/blog/javascript-pretty-date/

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

http://www.pengoworks.com/workshop/jquery/calculation.plugin.htm

Update: Dan has posted a blog entry that covers use cases and some of it’s innner workings in more detail, again worth a look! http://blog.pengoworks.com/index.cfm/2008/1/23/jQuery-Calculation-Plugin-Making-calculating-easy

http://code.google.com/p/jquery-aop/

The origional thread can be found here (I couldn’t find it at the time of the writing but I’m sure it’s there!): http://www.nabble.com/forum/Search.jtp?forum=20161&local=y&query=faster+trim