NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.

Using jQuery Manipulation Functions (Append, Prepend, After, Before) To Reorder Items

Posted At : March 25, 2009 1:19 PM | Posted By : Brian
Related Categories: jQuery, JavaScript
I discovered something interesting quite by accident today. I was trying to figure out the best way to reorder certain <li> items based on the value of a particular trait (while ignoring those <li> items that didn't have that particular trait at all). I figured the best way to accomplish this was to:
  1. Select all of the items that had the trait and store them in an array
  2. Resort the contents of the array into a new array.
  3. Delete the selected items from the list (so as not to replicate them)
  4. Loop through the new array and add the items back into the list using the jQuery prepend() function to put them at the top of the list.

When I ran my first test of my code, I left out the deletion step so I could compare the original item order with the new item order, figuring I would have duplicates of the selected items.

However, I was surprised to discover that prepend() removed the original instances of the selected list items, leaving only the prepended copies. Essentially, it ended up moving the items rather than duplicating them.

There's nothing on the official documentation page that says that if you're prepending an item to a collection that already contains an instance of that item that it will remove the original item for you, but that's apparently what it's programmed to do.

I ran a quick test of some of the other related Manipulation functions (append(),after(),before()), and they all seem to behave that way as well.

Thought it was worth sharing. Certainly makes my reordering task a bit easier.

Comments (3) | Print | del.icio.us | Linking Blogs
Comments
[Add Comment]
Yep that's right buddy .. when you 'select' items, you are selecting them and doing something with them - not copying them into memory (as you would a variable in most programming).

If you put them somewhere .. that's where they'll go.

Similarly if you add an attribute (e.g. toggle a class) on those items, the class will be applied to the items .. not a copy of the items in memory .. otherwise you would have to "re-add" the item to the DOM once you had manipulated it.

(btw your captcha is slightly unreadable .. got it wrong the first time = poor usability)
# Posted By Aidan | 5/7/09 9:27 PM
I am interested in your proposed method to change some elements. I rather that in one of the items in order to achieve its objective you are using jQuery - it is very reliable. jQuery - Library of JavaScript, focusing on the interaction of JavaScript and HTML. Library jQuery helps easy access to any element of DOM, refer to the attributes and content of DOM, to manipulate them. JQuery library also provides a convenient API for working with Ajax.
Features jQuery

* Move the tree DOM, including support XPath as a plug;
* Event;
* Visual effects;
* AJAX-supplements;
* JavaScript-plugins.

You can find many applications for your sites on a site http://www.queentorrent.com and free to download.
# Posted By Nina | 7/20/09 4:29 PM
[Add Comment]
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.