JQuery - Sorting DOM From Objects

Question

I have several Objects that contain a reference to DOM elements:

var liObjs = [new Li($el1, price), new Li($el2, price), new Li($el3, price)]

// Li Model
function Li($element, price){
 var self = this;

 self.price = price; 
 self.$element = $element;
}

// My DOM Looks like this:
<ul>
 <li>Price: $3</li>
 <li>Price: $1</li>
 <li>Price: $2</li>
</ul>

And and I need them sorted by price based on the objects in liObjs.

I've managed to sort liObjs based on each objects price property but I cannot render them in order for the life of me. Please help.

Note: The <li>s are already created in DOM but I need to reorder them when the page loads.

There's no jQuery code here. Is $el1 a DOM element or the jQuery object containing it. — Barmar
– Barmar, Commented Mar 15, 2017 at 19:36

jessegavin · Accepted Answer · 2017-03-15 19:42:50Z

2

Non jQuery Way

// Remove existing elements from the parent node.
var parent = liObjs[0].$element.parentNode;

while (parent.hasChildNodes()) {
  parent.removeChild(parent.lastChild);
}

// Assuming you have already sorted the array
// you can simply loop through them and add them

liObjs.forEach(function(item) {
  parent.appendChild(item.$element);
});

jQuery Way

$(liObjs[0].$element)
  .parent()
  .empty()
  .append(liObjs.map(function(item) {
    return item.$element;
  }));

Here's a CodePen showing how this works.
http://codepen.io/jessegavin/pen/NpavgZ?editors=1010

edited Mar 15, 2017 at 19:42

answered Mar 15, 2017 at 19:24

jessegavin

75.9k28 gold badges141 silver badges165 bronze badges

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

3 Comments

user3704920 Over a year ago

wouldn't parent.html(''); be faster?

jessegavin Over a year ago

I am pretty sure parent.html(''); destroys the li nodes. If you call .removeChild() they remain in memory which is nice because you maintain a reference to them in your liObjs array. Also... I doubt you'll notice any difference in performance.

Barmar Over a year ago

@jessegavin I don't think so. As long as you have references to them, the nodes still exist, they just get detacthed.

Collectives™ on Stack Overflow

JQuery - Sorting DOM From Objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related