使用data属性按字母顺序对div排序 [英] Sort the div in alphabetical order using data attribute
本文介绍了使用data属性按字母顺序对div排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用数据属性值按字母顺序对html div进行排序.我有以下代码,想知道如何实现
I want to sort the html div in alphabetical order using data attribute value. I have the following code and would like to know, how can this be achieved
<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);
这是代码未提供正确结果.请帮助我.
This is code is not giving the proper result. Please help me with this.
推荐答案
You can use 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);
这篇关于使用data属性按字母顺序对div排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文