jQuery – Creating Elements Part I: Using The each() Function

jQuery – Creating Elements Part I: Using The each() Function

Generating a list

I’m working on a project that required an unordered list. Who the hell cares, right? Well the list was the navigation for a timeline slider. Each block of content on the timeline needed its own list item to move the slider’s position so that the block was centered. The problem though was I didn’t know how many blocks there would be, and I wasn’t sure who would be making the changes later, if there were any. So here is a way to create a list, based on the number of other elements and their ‘rel’ attributes.

I know that barely makes sense, but you will understand once you see what I’m doing. Take a look at the demo…

View Demo


First up, the list, but you’ll notice that the list has no list items in the HTML.

<ul id="myList"></ul>

Pretty simple, yes? Now we need a bunch of elements that will determine the number of list items. We’ll also remember to put a ‘rel’ attribute on each of them.

<div class="content-block" rel="jan2012">There was a lot of snow this month. Plus I had a birthday</div>
<div class="content-block" rel="feb2012">My mom had her birthday.</div>
<div class="content-block" rel="march2012">My son had his birthday.</div>
<div class="content-block" rel="apr2012">Absolutely nothing happened this month</div>
<div class="content-block" rel="may2012">Something might have happened this month, buuuuuut I can't remember</div>
<div class="content-block" rel="june2012">Played a bunch of board games. Anyone a fan of Ascension?</div>

HTML wise, that is about all we need. Now to the fun part. The jQuery. I’ll leave out the styling in this post, because you can do that yourself, you don’t need me for that. Ready? Here we go!

var $contentblocks = $('.content-block');
 
$contentblocks.each(function() {
	var $this = $(this);	
	$('<li>', {
		text: $this.attr('rel')
	}).appendTo('#myList');			
});

That is it. Just a few lines of jQuery and we are up and running. What is happening there? Well, I’m declaring a variable that is all of the content-block divs. Then using the each() function that basically says, “For each of those divs, create a list item, whose text value is equal to the ‘rel’ attribute of the relating div. When you have them all, put them into that unordered list with an id of ‘myList’. Thanks.”

What do you end up with? If you haven’t yet, click the demo button above and you’ll see!

For me, there was a ton more javascipt, because there was a slider involved, a mess of other stuff, and a click event on each of the list items. Speaking of which, if you need them to do something on click, here is what that would look like:

var contentblocks = $('.content-block');
 
$contentblocks.each(function() {
	var $this = $(this);	
	$('<li>', {
		text: $this.attr('rel'),
		click: function() {
			//Do stuff here. Like start phase two of taking over the interwebs.
		}
	}).appendTo('#myList');			
});

There you have it. An easy solution!

Tags: ,

Leave a Reply