当前位置: 动力学知识库 > 问答 > 编程问答 >

Sorting list of elements in JQuery

问题描述:

I have a list of elements that I get using JQuery.

var $self = $(this);

var $fields = $('.identifier-controls', $self);

This list is the list of elements that need to be manipulated in some way when the control renders. Each element in the list of $fields contains a data attribute called "data-order". This attribute tells me what order I should arrange the elements with in the control (ah requirements). The order does not have to be in direct linear order (meaning that the first control can have an attribute value of 10 and the next one 15 and the next one 17 etc. They just need to appear in the asc order. Is there a simple way to achieve this? All the ways that I can come up with seem a bit over complicated.

网友答案:

Try this:

$(function(){
   var $self = $(this);
   var sortedList = $('.identifier-controls', $self).sort(function(lhs, rhs){
      return parseInt($(lhs).attr("data-order"),10) - parseInt($(rhs).attr("data-order"),10);
   });
});

the variable sortedList now has the sorted elements.

网友答案:

Something like:

$fields.sort(function(a, b) {
    return a.getAttribute('data-order') > b.getAttribute('data-order');
}).appendTo($fields.parent());

Fiddle: http://jsfiddle.net/gCFzc/

网友答案:

After searching through many solutions I decided to blog about how to sort in jquery [1]. In summary, steps to sort jquery "array-like" objects by data attribute...

  1. select all object via jquery selector
  2. convert to actual array (not array-like jquery object)
  3. sort the array of objects
  4. convert back to jquery object with the array of dom objects

Html

<div class="item" data-order="2">2</div>
<div class="item" data-order="1">1</div>
<div class="item" data-order="4">4</div>
<div class="item" data-order="3">3</div>

Plain jquery selector

> $('.item')
[<div class="item" data-order="2">2</div>,
 <div class="item" data-order="1">1</div>,
 <div class="item" data-order="4">4</div>,
 <div class="item" data-order="3">3</div>
]

Lets sort this by data-order

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}
> getSorted('.item', 'data-order')
[<div class="item" data-order="1">1</div>,
 <div class="item" data-order="2">2</div>,
 <div class="item" data-order="3">3</div>,
 <div class="item" data-order="4">4</div>
]

Hope this helps!

[1] http://blog.troygrosfield.com/2014/04/25/jquery-sorting/

网友答案:

An insertion sort would be a fairly straight-forward way of doing it.

Or being a bit subversive, you can take advantage of the JavaScript engine for this:

var $fields, $container, sorted, index;

$container = $('body');
$fields = $("div[data-order]", $container);
sorted = [];
$fields.detach().each(function() {
    sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
});
sorted.forEach(function(element) {
    $container.append(element);
});

Live Example:

(function($) {
    var $fields, $container, sorted, index;
  
    $container = $('body');
    $fields = $("div[data-order]", $container);
    sorted = [];
    $fields.detach().each(function() {
        sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
    });
    sorted.forEach(function(element) {
        $container.append(element);
    });
})(jQuery);
<div data-order="30">30</div>
<div data-order="40">40</div>
<div data-order="10">10</div>
<div data-order="20">20</div>
<div data-order="1">1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
分享给朋友:
您可能感兴趣的文章:
随机阅读: