Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with:

jQuery Plugin To Return Delimited Value List Of Stack Element Attributes (Follow Up)

By Ben Nadel on

This is just a follow up to my previous post on the same topic. In my comments, I had mentioned that after I wrote my attrList() jQuery plugin, someone pointed out to me that the same thing was doable using an array and the jQuery mapping function (which maps an array to a function). Someone then contacted me, asking about it, so I thought I would post up the same demo, except this time, instead of building a value list string as I iterate through the jQuery stack elements, I am going to be building up an array. Then, once I have completely gone through the elements, I will simply join the array using the given delimiter.

The benefit here, while very small, is that we are not building a string as we go - we are building an array. Then, once we are through, we concatenate all the value in the array down into a single string. From what I have been told, doing this via an array has much less overhead than repetitive string concatenation (in general). However, I have also been told that Javascript arrays are just about the most poorly implemented arrays of any programming language (in terms of lookup speeds), so the speed thing might not be a factor. Using the join() method on the Javascript array is, however, much cleaner looking to me and it is certainly nice not to have to worry about the delimiter every time we add a new value.

  • <!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>
  •  
  • <!-- Linked Files. -->
  • <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 ){
  • // Create an array to store the attribute values of
  • // the jQuery stack items.
  • var arrValues = new Array();
  •  
  • // 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 to the value array.
  • this.each(
  • function( intI ){
  • // Get a jQuery version of the current
  • // stack element.
  • var jNode = $( this );
  •  
  • // Add the given attribute value to our
  • // values array.
  • arrValues[ arrValues.length ] = jNode.attr(
  • strAttribute
  • );
  •  
  • }
  • );
  •  
  • // Return the value list by joining the array.
  • return(
  • arrValues.join( strDelimiter )
  • );
  • }
  •  
  •  
  • // 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>

Clicking on the button properly alerts the value list:

4-5-1-2-3

I chose not to use the jQuery $.map() method, since the each() method does pretty much the same exact thing.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

how 'bout this-

var joinedValues = $.map($("#yourselector"),function(el){
return $(el).html();
}).join(",");

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.