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

By Ben Nadel on July 25, 2007

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: