Sort DOM elements to order array with jQuery

Question

A moment ago I asked this question: javascript sort array to align with order array based on what turned out to be a false premise. (I've been up for too long, give me a break please).

What I really need to do is sort DOM elements. Performance is key in my application as it will be running in very CPU-poor situations. So what I have is something like this:

<div id="moduleWrap">
    <div class="module">Jack</div>    <!-- 0 -->
    <div class="module">Jill</div>    <!-- 1 -->
    <div class="module">Nancy</div>   <!-- 2 -->
    <div class="module">Tom</div>     <!-- 3 -->
    <div class="module">Cartman</div> <!-- 4 -->
</div>

And in JavaScript:

$modules = $('#moduleWrap .module');
order    = [3,1,4,0,2];

What I need is this:

<div id="moduleWrap">
    <div class="module">Tom</div>     <!-- 3 -->
    <div class="module">Jill</div>    <!-- 1 -->
    <div class="module">Cartman</div> <!-- 4 -->
    <div class="module">Jack</div>    <!-- 0 -->
    <div class="module">Nancy</div>   <!-- 2 -->
</div>

I thought (wrongly) that I could sort the jQuery object and simply append the result. This is not so.

If you really care about performance that much why do you use jquery in the first place? — georg
– georg, Commented Oct 31, 2012 at 0:33
Another part of the application is using highcharts, which needs it (actually I am using Zepto). And rather than serving different js files to different views, I am leveraging the browser caching by bundling js into a single file. Jquery is not needed here necessarily. — Fresheyeball
– Fresheyeball, Commented Oct 31, 2012 at 0:36

Felix Kling · Accepted Answer · 2012-10-31 00:20:08Z

9

I would just iterate over the order array and rearrange the DOM elements accordingly:

var elements = [];
$.each(order, function(i, position) {
    elements.push($modules.get(position));
});

$('#moduleWrap').append(elements);

DEMO

To increase performance, you can take away more and more jQuery. For example:

var wrapper = document.getElementById('moduleWrap');
for(var i = 0, l = order.length; i < l; i++) {
    wrapper.appendChild($modules.get(order[i]));
}

DEMO

jQuery is great because it makes things easy, but if you need high performance, you should rather go without it.

edited Oct 31, 2012 at 0:20

answered Oct 31, 2012 at 0:14

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fresheyeball Over a year ago

I don't believe you can append an array of Dom elements. Also it can't be in addition to in the Dom. It must replace. Pure js answers acceptable.

Felix Kling Over a year ago

@Fresheyeball: Yes you can pass an array of elements (see the docs) and why can't you append (add) elements? If the element already exist in the DOM, it is moved to the new location, not cloned. This is a very easy way to rearrange DOM elements.

Fresheyeball Over a year ago

As far as. Can tell you can append elements, but not an array. Great answer btw.

Bwyss · Accepted Answer · 2014-08-31 14:14:22Z

2

I know this is late, but maybe it will help someone. I was trying to do a similar thing and #Felix Kling's answer got me 90% there. But in my case I have a div id which is equal to the order values, like this:

order    = [3,1,4,0,2];

<div id="0" class="module">Jack</div>    <!-- 0 -->
<div id="1" class="module">Jill</div>    <!-- 1 -->
<div id="2" class="module">Nancy</div>   <!-- 2 -->
<div id="3" class="module">Tom</div>     <!-- 3 -->
<div id="4" class="module">Cartman</div> <!-- 4 -->

then I can simply push the element using the position value

var elements = [];
$.each(order, function(i, position) {
    elements.push($('#'+position));
});

$('#moduleWrap').append(elements);

answered Aug 31, 2014 at 14:14

Bwyss

1,8363 gold badges28 silver badges50 bronze badges

Comments

Bruno · Accepted Answer · 2012-10-31 00:50:32Z

1

Try this.

Detaching the elements from the DOM tree may speed up the process.

$modules.detach();

var len = order.length,
    temp = [];

for( var i = 0; i < len; i++ ) {
  temp.push( $modules[ order[i] ] );
}

$("#moduleWrap").append( temp );

Fiddle here http://jsfiddle.net/rEFu3/

answered Oct 31, 2012 at 0:50

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Sort DOM elements to order array with jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related