jquery sort element with array value

Question

I need to sort some elements depend on it attribute. For an example:

<div id="sort">
<div n="1"></div>
<div n="2"></div>
<div n="3"></div>
<div n="4"></div>
</div>

And array_num

{3, 2, 1, 4}

pseudo code:

$('#sort').sort(array_num, 'n');

results will be:

<div id="sort">
<div n="3"></div>
<div n="2"></div>
<div n="1"></div>
<div n="4"></div>
</div>

Is there some kind of logic behind that order or do you need it just exactly like that? — jAndy
– jAndy, Commented Aug 25, 2010 at 6:37
n is not a valid html tag attribute. It will cause you some undesired behavior on some browser. — Reigel Gallarde
– Reigel Gallarde, Commented Aug 25, 2010 at 6:38
@jAndy: I want exactly like that :D @Reigel: jquery have expando attribute itself. — StoneHeart
– StoneHeart, Commented Aug 25, 2010 at 6:38
If you use jquery in IE, try to see innerHTML you will see expando attribute of Jquery in html tag ex: <div JQuery3312312313="12"></div>. — StoneHeart
– StoneHeart, Commented Aug 25, 2010 at 6:48

fantactuka · Accepted Answer · 2010-08-25 06:55:53Z

8

var order = [3, 2, 4, 1];
var el = $('#sort');
var map = {};

$('#sort div').each(function() { 
    var el = $(this);
    map[el.attr('n')] = el;
});

for (var i = 0, l = order.length; i < l; i ++) {
    if (map[order[i]]) {
        el.append(map[order[i]]);
    }
}

Full code here

answered Aug 25, 2010 at 6:55

fantactuka

3,33421 silver badges29 bronze badges

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

1 Comment

tylerl Over a year ago

Works excellently, even if an element in the $.each() is missing its attribute - just puts the element at the top. And it works when numbers in the var order are missing from the set of matched elements too.

sharat87 · Accepted Answer · 2012-02-18 04:52:39Z

5

untested...

$.fn.asort = function (order, attrName) {
    for(var i = 0, len = order.length; i < len; ++i) {
        this.children('[' + attrName + '=' + order[i] + ']').appendTo(this);
    }
}

edited Feb 18, 2012 at 4:52

answered Aug 25, 2010 at 6:54

sharat87

7,55612 gold badges57 silver badges81 bronze badges

Comments

Paul · Accepted Answer · 2017-03-27 14:07:08Z

I stumbled across this trying to fix what I was after. I took @shrikant-sharat's method and added a little to it as the attribute I needed to sort on was actually on a child element. Thought I'd add here in case it helps anyone (and for future me!)

$.fn.asort = function (order, attrName, filter) {
  console.log(this.length, order.length, order);
  for(var i = 0, len = order.length; i < len; ++i) {

    if(typeof(filter) === 'function') {
      filter(this.children(), attrName, order[i]).appendTo(this);
    } else {
      this.children('[' + attrName + '=' + order[i] + ']').appendTo(this);
    }
  }
  return this.children();
}

It allows you to pass a filter function to match the element you're after. It's not the most efficient I suppose, but it works for me, e.g.:

$('.my-list').asort(mapViewOrder, 'data-nid', function(items, attrName, val) {
  return items.filter(function(index, i) {
    return ($(i).find('[' + attrName + '="' + val + '"]').length);
  });
});

Tim · Accepted Answer · 2020-02-12 15:43:58Z

0

Since jQuery returns an array of objects, you may use the sort method, and then 'reappend' the children to the parent in the newly sorted order:

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

var div = $('#sort');

div.children().sort((a, b) => {
  var aIndex = order.indexOf(parseInt(a.getAttribute('n')));
  var bIndex = order.indexOf(parseInt(b.getAttribute('n')));

  return aIndex - bIndex;
}).appendTo(div);

#sort > div {
  padding: 10px;
  border-bottom: 1px solid #E1E1E1;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sort">
  <div n="1">1</div>
  <div n="2">2</div>
  <div n="3">3</div>
  <div n="4">4</div>
</div>

answered Feb 12, 2020 at 15:43

Tim

3,25328 silver badges22 bronze badges

Collectives™ on Stack Overflow

jquery sort element with array value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related