Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: JD Courtoy
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: JD Courtoy ( @jd_courtoy )

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

Published in Comments (2)

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" "">
	<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.
				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(


			// Return the value list by joining the array.
				arrValues.join( strDelimiter )

		// This will return the ID list of all inputs
		// with the name, "ID".

		function GetIDs(){
				$( "input[@name='id']" ).attrList( "value", "-" )



			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" />

			value="Alert Value List"
			onclick="alert( GetIDs() );"



Clicking on the button properly alerts the value list:


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

Want to use code from this post? Check out the license.

Reader Comments

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel