$(document).ready(function() {
	var totalAll = 0;
	$('.reversed').each(function() {
		var children = $(this).children('li');
		var totalChildren = children.length;
		totalAll+= totalChildren;
	});
	$('.reversed').each(function() {
		var children = $(this).children('li');
		var totalChildren = children.length;
		children.each(function() {
			$(this).val(totalAll--);
		});
	});
});

$(document).ready(function() {
	$('.reversed').each(function() {
		var $children = $(this).children('li');
		var totalChildren = $children.length;
		$children.each(function() {
			$(this).val(totalChildren--);
		});
	});
});

I don’t understand – what what do you use “var start = 0;”?

Congrats on teaching and the new gig with Viget, they are an impressive outfit that just got better.

Cheers.

How to create an ordered list that counts in reverse with jQuery.

…

This post was mentioned on Twitter by davist11: Just wrote a short blog article about creating a reversed ordered list with jQuery http://bit.ly/4z4E5V...

I think if you say, “This is our list of $whatevers”, and you have an ordered list of items, the meaning of those items is the same as if they had an invisible #1-10 next to them. Whether that ranking means “best” or “worst” or “funniest” or whatever is, of course, subject to the nature of the content. But it makes me feel like it’s still well worth having the script reverse the actual items.

That said, there’s no denying there’s a performance difference between just setting the value and rearranging the elements. I profiled the four-item ordered list and then a 120-item ordered list with each of our scripts, with these results:

Your script:

4: 1.37ms
120: 21.164ms

My script:

4: 3.608ms
120: 63.695ms

Agreed, so I guess it just depends on whether there is a reference somewhere on the page saying that this list is presented in a certain order for a specific reason. If not, then I don’t think too much value is added in reversing it for non-JavaScript users.

I wonder what kind of load reversing the list adds to the page. I’m sure it’s trivial in this example since the list is so short, but what about a list with 100 items?

I guess technically there’s nothing but order necessarily implied by an unordered list, but there are default ways, as far as browsers are concerned, of interpreting them, and the default is as a numbered list. In this instance, I think browsers behave just like any reader would: unless we’re explicitly told otherwise, the numbers start at one and proceed upwards.

I guess reordering the list does add some sort of semantic value, but how much really? It depends if there is any value given to item 10 vs. item 1.

This is number one.
	This is number two.
	This is number three.
	This is number four.

$(document).ready(function() {
	$('.reversed').each(function() {
		var children = $(this).children('li').get();
		$(this).empty();
		children.reverse();

		$(this).append(children);

		$(children).each(function() {
			$(this).val(children.length - $(children).index(this));
		});

	});
});

The only, very small, concern I have about this is that the meaning of the ordered list in so far as the mark-up is concerned is exactly opposite what you intend it to be. The javascript doesn’t just enhance the presentation of the list, it flips the meaning. I’m not sure how terribly concerned I am about the browsers that view our sites without javascript, but violating the philosophical separation of meaning:markup / behavior:script bothers me a little bit.