jQuery Plugin To Return Delimited Value List Of Stack Element Attributes : Kinky Solutions : A Student's Perspective by Ben Nadel

jQuery Plugin To Return Delimited Value List Of Stack Element Attributes

Posted July 11, 2007 at 3:07 PM

I was trying to give Tony Petruzzi some feedback on his record sorting algorithm when I mentioned that with jQuery it would probably be quite easy to get a comma-delimited list of database IDs for use with the sort update. I assumed that there would be something already built into the jQuery API for doing this; however, with a quick look at the API, it looks like all the attribute-getting methods (attr()) work on the first item in the jQuery stack, not the set of elements.

I am sure that this ability is already part of the vast API (that I am just not seeing) or at least it is already covered by an existing plugin, but I thought this would be a perfect time for me to exercise some of my jQuery plugin writing skills. Below, I wrote a jQuery plugin called attrList(). This returns a delimited list of a given attribute for all elements in the current jQuery stack. You can also pass in an optional second argument, the delimiter, which is defaulting to comma.

Launch code in new window » Download code as text file »

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Writing jQuery Plugin Demo</title>
<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript">
// This jQuery v1.1.3 plugin will return an delimited
// list of the given attribute of all elements in the
// current jQuery stack.
jQuery.fn.attrList = function( strAttribute, strDelimiter ){
// Start out with an empty value list. This list
// will eventually contain a delimited list of
// each attribute value.
var strValueList = "";
// Check to see if we were given a delimiter.
// By default, we will use the comma.
strDelimiter = (strDelimiter ? strDelimiter : ",");
// Loop over each element in the jQuery stack and
// add the given attribute value to the list.
this.each(
function( intI ){
// Get a jQuery version of the current
// stack element.
var jNode = $( this );
// Add the attribute to the list. When
// adding the value, check to see if
// we need to add the leading delimiter.
strValueList += (
(strValueList.length ? strDelimiter : "") +
jNode.attr( strAttribute )
);
}
);
// Return the value list.
return( strValueList );
}
// This will return the ID list of all inputs
// with the name, "ID".
function GetIDs(){
return(
$( "input[@name='id']" ).attrList( "value" )
);
}
</script>
</head>
<body>
<form>
<!---
Get some hidden values. The order of the
value is important. We want to make sure
this is reflected in the value list.
--->
<input type="hidden" name="id" value="4" />
<input type="hidden" name="id" value="5" />
<input type="hidden" name="id" value="1" />
<input type="hidden" name="id" value="2" />
<input type="hidden" name="id" value="3" />
<input
type="button"
value="Alert Value List"
onclick="alert( GetIDs() );"
/>
</form>
</body>
</html>

Normally, the jQuery plugin code would be written to a separate Javascript file, but for demo purposes, I have just put it in the HEAD of the HTML page. If you were to click on the input button, the page would alert the following text:

4,5,1,2,3

This is the comma delimited list of the Value attribute of all input fields with the name "id". Look how freakin' easy jQuery makes things like this:

Launch code in new window » Download code as text file »

$( "input[@name='id']" ).attrList( "value" )

As you can see in the code, the alerted value is reflective of the order that the hidden input fields appear in the document. This works because jQuery collects elements in its stack based on a top-down search. Meaning, elements that it finds earlier in the document are added to the stack first. Man, I love jQuery and I really finding it fun to write jQuery plugins.

Also, on a side note, this was run using the new and ultra fast jQuery v1.1.3. Good stuff!

Download Code Snippet ZIP File

Related Blog Entries

Hours And Seconds Work In ColdFusion DateFormat()

Warning: Don't Stick Your iPhone In The Blender

Reader Comments

Neato, thanks for posting this. I'm still using prototype.js but jQuery seems pretty damn nice.

Posted by Boyan on Jul 11, 2007 at 6:21 PM

Ben,

Thank you for all your help today. :)

Posted by tony petruzzi on Jul 11, 2007 at 6:21 PM

Hey guys, I just realized there is a big mistake in the above code. Once inside of a jQuery plugin, you are not supposed to refer to the "$" object any more (as jQuery might release it back to be compatible with existing code). Instead, in the above, all the "$" should be replaced with the "jQuery" variable reference.

Posted by Ben Nadel on Jul 12, 2007 at 7:17 AM

@Ben:

I'd recommend using arrays instead of strings. If the attribute value would contain a comma, the list will be wrong.

Even if you prefer to return a string instead of an array, use an array and then use the join() method. This is much more efficient than concatenating a string together. The performance won't be noticable in with a small dataset like in your example, but it's really noticeable when you string size grows.

Posted by Dan G. Switzer, II on Jul 12, 2007 at 12:17 PM

@Dan,

Good point. And, in fact, after I wrote this, someone pointed out to me a similar algorithm that mapped jQuery stack elements to an array of values and then joined the array at the end.

It's really cool how flexible jQuery is.

Posted by Ben Nadel on Jul 12, 2007 at 12:23 PM

Post Comment | Ask Ben

jQuery Plugin To Return Delimited Value List Of Stack Element Attributes : Kinky Solutions : A Student's Perspective by Ben Nadel