Javascript/jQuery: Reordering divs according to data-attribute values [duplicate]

Question

Possible Duplicate:
Sort element by numerical value of data attribute

I want to reorganize divs according to a data attribute set on them, ranging from highest integer to lowest. Right now, I push all the data into an array and sort that but I'm not sure how to proceed. How can I use this to reorganize divs inside their parent div?

var prices = new Array();
$(this).children('.listing-item').each(function() {
    var price = parseInt($(this).attr('data-listing-price'));
    prices.push(price)
});
prices.sort(function(a,b){return b-a});

This gets me an array like 139,129,129,109,109,84 for example. Now my idea was to loop through the divs another time with a selector like this:

$('.listing-item[data-listing-price="' + prices[0] + '"]')

but I'm not sure how to move the divs (the div with the highest data-attribute integer should move to the top and so on. Any idea?

Well... you're right haha. Thanks a lot and sorry I didn't see that one before I posted mine. — Galadre
– Galadre, Commented Jan 21, 2013 at 12:30

Prisoner · Accepted Answer · 2014-02-18 09:48:26Z

45

Here is the solution

HTML:

<div id="list">
  <div class="listing-item" data-listing-price="2">2</div>
  <div class="listing-item" data-listing-price="3">3</div>
  <div class="listing-item" data-listing-price="1">1</div>
  <div class="listing-item" data-listing-price="4">4</div>
</div>

JS:

var divList = $(".listing-item");
divList.sort(function(a, b){
    return $(a).data("listing-price")-$(b).data("listing-price")
});
$("#list").html(divList);

JSFiddle:

http://jsfiddle.net/bittu4u4ever/ezYJh/1/

edited Feb 18, 2014 at 9:48

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

answered Jan 21, 2013 at 12:33

Sandeep

2,12121 silver badges35 bronze badges

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

10 Comments

Felix Kling Over a year ago

The callback should return a negative number, positive number or 0, not a boolean.

Sandeep Over a year ago

Updated. But both ways work... ;)

Felix Kling Over a year ago

Returning a boolean only seems to work, depending on the data (and algorithm) you can get unexpected results (because you make a to be always equal or larger than b, but never smaller). Read more about Array.sort.

Galadre Over a year ago

Thanks, this works fine! As Felix said this question is a bit of a duplicate but this answer still helps more than using the answer from the other question.

Felix Kling Over a year ago

Oh btw, you should not use .html. I hope jQuery detects this, but in the worst case it serializes all DOM element to HTML and converts them back to DOM elements. You will loose all data and event handlers bound to the elements. Just use .append instead.

|

Heart · Accepted Answer · 2013-01-21 12:31:57Z

0

var s = new Array;
var i = 0;
var x = $(".ch").length;
$(".ch").each( function() {
    s[i] = $(this).data("id");
    i++;
});
var g = s.sort(function(a,b){return a-b});
for(var c = 0; c < x; c++) {
    var div = g[c];
    var d = $(".ch[data-id="+div+"]").clone();
    var s = $(".ch[data-id="+div+"]").remove();
    $(".pa").append(d);
}

Working Fiddle

answered Jan 21, 2013 at 12:31

Heart

5181 gold badge3 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:27Z

-1

You can adapt the function described here: How may I sort a list alphabetically using jQuery? and just change the sort function ('<')

<div id="foo">
    <div class="test" data-listing-price="30">30</div>
    <div class="test" data-listing-price="62">62</div>
    <div class="test" data-listing-price="11">11</div>
    <div class="test" data-listing-price="43">43</div>
</div>

In your js (highest integer to lowest):

var div = $('#foo');
var listitems = div.children('div.test').get();
listitems.sort(function (a, b) {
 return (+$(a).attr('data-listing-price') > +$(b).attr('data-listing-price')) ?
  -1 : (+$(a).attr('data-listing-price') < +$(b).attr('data-listing-price')) ? 
   1 : 0;
})
$.each(listitems, function (idx, itm) { div.append(itm); });

http://jsfiddle.net/NfVxk/

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Jan 21, 2013 at 12:30

JohnJohnGa

15.7k20 gold badges65 silver badges88 bronze badges

4 Comments

Felix Kling Over a year ago

The callback should return a negative number, positive number or 0, not a boolean. And neither a nor b have a data-listing-price property. That's not how data attributes work. You have to access them via the .dataset property or use getAttribute (or jQuery of course).

Felix Kling Over a year ago

Using < is still wrong, read more about Array.sort.

JohnJohnGa Over a year ago

a nor b yes but $(a) and $(b) have a data-listing-price attribute

Felix Kling Over a year ago

> is wrong too... you have to return a positive or negative number or 0, not a boolean. That's why Joseph is using - in the original answer. And honestly I don't see a point in duplicate his answer. I hope you voted to close this question as duplicate at least.

Collectives™ on Stack Overflow

Javascript/jQuery: Reordering divs according to data-attribute values [duplicate]

3 Answers 3

10 Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

4 Comments

Linked

Related