데이터 속성을 사용하여 알파벳 순서로 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

당신은이 내림차순으로 정렬 할 수있는 옵션을 포함하는 수정 된 버전입니다 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 2

당신은 속성 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 3

이 작동합니다 : -

 $("#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 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); 

}