By: Nate

Steward 2 months, 2 weeks ago on Wordpress

May be better without unnecessary variable “start”?

$(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;”? ... See all content Hide content

Reply

Judd Lyon 2 months, 3 weeks ago on Wordpress

Nice little trick, thanks!

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

Cheers.

Reply

jquerybuzz 2 months, 4 weeks ago on Twitter

Reversed Ordered List with jQuery | Trevor Davis http://bit.ly/2DJNTf

Reply

Trevor 2 months, 4 weeks ago on Wordpress

@Nate-

Wow, thanks for running the performance tests. Your point about reversing the list items is certainly valid and a nice addition to the example.

Reply

Reversed Ordered List with jQuery | Trevor Davis 2 months, 4 weeks ago on Wordpress

[...] Reversed Ordered List with jQuery | Trevor Davis – [...]

Reply

jQuery_Tips 3 months ago on Twitter

Reversed Ordered List with #jQuery http://bit.ly/3BqrAE

Reply

Nate 3 months ago on Wordpress

@Trevor-

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 ... See all content Hide content

Reply

Nate 3 months ago on Wordpress

@Nate-

Of course, by “unordered” above, I mean “ordered”.

Reply

Trevor 3 months ago on Wordpress

@Nate-

<pre tag sir…

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.

Reply

Nate 3 months ago on Wordpress

This is the sort of thing I mean:

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));

});

});

}); ... See all content Hide content

Reply

mlane 3 months ago on Twitter

Reversed Ordered List with #jQuery - http://j.mp/1OFVq3

Reply

Nate 3 months ago on Wordpress

I’d suggest, as an alternative, actually reordering the items in the list as well as adding values, so that the meaning that’s in the mark-up–that list of 1-10 items–is accurate, but simply presented in a different order than you’ll accomplish via javascript.

Reply

Tom 3 months ago on Wordpress

Cool. Just in time for the end of year ‘best of’ lists to start up.

Reply