使用数据属性按字母顺序对 div 进行排序

Question

我想使用数据属性值按字母顺序对 html div 进行排序。我有以下代码，想知道如何实现

<div id="aphaOrder">
    <div class="value"  data-site="olark">olark</div>   
    <div class="value"  data-site="snapengage">snapengage</div> 
    <div class="value"  data-site="helponclick">helponclick</div>
    <div class="value"  data-site="hangouts">hangouts</div>
    <div class="value"  data-site="atlass">atlass</div> 
    <div class="value"  data-site="hipchat">hipchat</div>   
    <div class="value"  data-site="chat hip">chat hip</div>
    <div class="value"  data-site="force">force</div>
    <div class="value"  data-site="sugar sms">sugar sms</div>
    <div class="value"  data-site="capsule">capsule</div>
    <div class="value"  data-site="highrise">highrise</div>
    <div class="value"  data-site="nimble">nimble</div>
    <div class="value"  data-site="batch">batch</div>
    <div class="value"  data-site="book crm">book crm</div>
    <div class="value"  data-site="solve">solve</div>
    <div class="value"  data-site="insightly">insightly</div>
    <div class="value"  data-site="pipeliner">pipeliner</div>
    <div class="value"  data-site="shopify">shopify</div>
    <div class="value"  data-site="wordpress">wordpress</div>
    <div class="value"  data-site="Magento">Magento</div>
</div>

var alphabeticallyOrderedDivs = $('.value').sort(function(a,b){
    return $(a).attr('data-site') > $(b).attr('data-site');
});
$("#aphaOrder").html(alphabeticallyOrderedDivs);

这是代码没有给出正确的结果。请帮我解决这个问题。

Answer 1

您正在尝试获取属性data-value。没有属性这样的。检查 JSFIDDLE

试试这个：

return $(a).data('site').toLowerCase() > $(b).data('site').toLowerCase();

或

return $(a).attr('data-site').toLowerCase() > $(b).attr('data-site').toLowerCase();

输出将是：

atlass
batch
book crm
capsule
chat hip
force
hangouts
...

Answer 2

这应该有效：-

        $("#aphaOrder .value").sort(function (a, b) {
            if ( ($(a).attr("data-site").toLowerCase() > $(b).attr("data-site").toLowerCase()) )  { 
                return 1;
            } else if ( ($(a).attr("data-site").toLowerCase() == $(b).attr("data-site").toLowerCase()) ){
                return 0;
            } else {
                return -1;
            }
        }).each(function () {
            var elem = $(this);
            elem.remove();
            $(elem).appendTo("#aphaOrder");
        });

http://jsfiddle.net/0bs5mu6e/2/

Answer 3

您可以使用String.prototype.localeCompare

JSFIDDLE here

var alphabeticallyOrderedDivs = $('.value').sort(function(a, b) {
    return String.prototype.localeCompare.call($(a).data('site').toLowerCase(), $(b).data('site').toLowerCase());
});

var container = $("#aphaOrder");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);

Answer 4

这是一个修改后的版本，其中包含一个降序排序选项。

var alphaOrder = function(sortDescending){
var $container = $('section.grid'),
    $containerInner = $container.find('> ul'),
    alphaOrder = $container.find('li').sort(function(a, b) {
        // return String.prototype.localeCompare.call($(a).data('name').toLowerCase(), $(b).data('name').toLowerCase());
            var an = a.getAttribute('data-name'),
                bn = b.getAttribute('data-name'),
                pos = sortDescending ? -1 : 1,
                neg = sortDescending ? 1 : -1;

            if(an > bn) { return pos; }
            if(an < bn) { return neg; }
            return 0;
    });
    // console.log(typeof alphaOrder);
$containerInner.detach().empty().append(alphaOrder);
$container.append($containerInner);

}

使用数据属性按字母顺序对 div 进行排序

Sort the div in alphabetical order using data attribute

javascript

sorting

jquery