Sort divs bases on element's data attribute

Question

I need to be able to sort a list of divs based on the data-price attribute of a sub element. This is my markup:

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd.
</div>

<div class="container">
  <div class="terminal" data-price="130">
      <h3>130</h3>
  </div>
  130 - I should come in 1st.
</div>

This is the script I have so far:

function sorter(a, b) {
    return a.getAttribute('data-price') - b.getAttribute('data-price');
};
$(document).ready(function () {
        var sortedDivs = $(".terminal").toArray().sort(sorter);
        $.each(sortedDivs, function (index, value) {
            $(".container", this).html(value);
            //console.log(value);
        }); 
});

The result should replace the existing markup. I just can't get to work. What needs to be changed?

Here's a fiddle.

possible duplicate of [Sort Divs in Jquery Based on Attribute 'data-sort'?](http://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort) — Ram, Sep 17 '13 at 10:50

Yoshi · Accepted Answer · 2013-09-17T10:58:50.193

11

the following should work:

$('.container').sort(function (a, b) {
  return $(a).find('.terminal').data('price') - $(b).find('.terminal').data('price');
}).each(function (_, container) {
  $(container).parent().append(container);
});

though I recommend against doing this without a common parent. The $(container).parent().append(container); part could be problematic if there are other child nodes present.

demo: http://jsbin.com/UHeFEYA/1/

alternatively you could do this:

$('.terminal').sort(function (a, b) {
  return $(a).data('price') - $(b).data('price');
}).map(function () {
  return $(this).closest('.container');
}).each(function (_, container) {
  $(container).parent().append(container);
});

edited Sep 17 '13 at 10:58

answered Sep 17 '13 at 10:50

Yoshi

54,081
14
89
103

Work great, thanks. But just to understand your code - what does the underscore "_, container" thing do? – Meek Sep 17 '13 at 11:09
@Meek nothing actually ;) jQuery's each function will provide first the index and second the list value to the callback. I use the `_` to indicate an unused parameter. – Yoshi Sep 17 '13 at 11:12

score 0 · Answer 2 · answered Sep 17 '13 at 10:50

If you want to place them in the body, you could do this:

function sorter(a, b) {
    return a.getAttribute('data-price') - b.getAttribute('data-price');
};

var sortedDivs = $(".terminal").toArray().sort(sorter);

$(".container").remove(); //removing the old values

$.each(sortedDivs, function (index, value) {
    $('body').append(value);   //adding them to the body
});

Living demo: http://jsfiddle.net/a2TzL/1/

Sort divs bases on element's data attribute

2 Answers2

Linked