Javascript：jqueryを使わないでデータアイテムをアルファベット順にソート

Question

私はアルファベット順にjavascriptを使用してリストをソートしようとしています。

私はすでにどれも、このようにjQueryを使って同様の機能きません：

$('.articles').append($('#articles-non-attached li')); 
     var alphabeticallyOrderedDivs = $('.articles li').sort(function(a, b) { 
      return String.prototype.localeCompare.call($(a).data('title').toLowerCase(), $(b).data('title').toLowerCase()); 
     }); 

しかし、今、私はちょうどJavascriptを使用する必要があります。

は、これまでのところ私が持っている：

var stores_li = document.querySelectorAll('.store-list-item'); 
 

 
//stores_li.sort(); 
 

 
[].slice.call(stores_li).sort(function(a, b) { 
 
    var textA = a.getAttribute('data-title').toLowerCase() 
 
    var textB = b.getAttribute('data-title').toLowerCase() 
 
    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 
 
    //return String.prototype.localeCompare.call(textA,textB); 
 

 
});

<ul> 
 
    <li class="store-list-item" data-title="a">Test 1</li> 
 
    <li class="store-list-item" data-title="c">Test 3</li> 
 
    <li class="store-list-item" data-title="b">Test 2</li> 
 
    <li class="store-list-item" data-title="d">Test 4</li> 
 
</ul>

Answer 1

あなたは、新たにソートされた項目を追加する必要があります。

var stores_li = document.querySelectorAll('.store-list-item'); 
 

 
[].slice.call(stores_li).sort(function(a, b) { 
 
    var textA = a.getAttribute('data-title').toLowerCase() 
 
    var textB = b.getAttribute('data-title').toLowerCase() 
 
    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 
 
}) 
 
    .forEach(function(el) {el.parentNode.appendChild(el)});

<ul> 
 
    <li class="store-list-item" data-title="a">Test 1</li> 
 
    <li class="store-list-item" data-title="c">Test 3</li> 
 
    <li class="store-list-item" data-title="b">Test 2</li> 
 
    <li class="store-list-item" data-title="d">Test 4</li> 
 
</ul>

ネイティブ.sort()方法は、DOMメソッドではないためです。 Array項目の任意のリストをソートするだけです。したがって、新しくソートされたアイテムを追加することによって、新しいエレメントオーダーをDOMにコミットします。

上記の単純な解決策は、すべてが同じ親を共有していることを前提としています。

var stores_li = document.querySelectorAll('.store-list-item'); 
 

 
Array.from(stores_li).sort((a, b) => 
 
    a.dataset.title.toLowerCase().localeCompare(b.dataset.title.toLowerCase()) 
 
) 
 
    .forEach(el => el.parentNode.appendChild(el));

<ul> 
 
    <li class="store-list-item" data-title="a">Test 1</li> 
 
    <li class="store-list-item" data-title="c">Test 3</li> 
 
    <li class="store-list-item" data-title="b">Test 2</li> 
 
    <li class="store-list-item" data-title="d">Test 4</li> 
 
</ul>

Answer 2

var stores_li = document.querySelectorAll('.store-list-item'); 
var sorted = [].slice.call(stores_li).sort(function(a, b) { 
    var textA = a.dataset.title.toLowerCase(); 
    var textB = b.dataset.title.toLowerCase(); 

    return textA.localeCompare(textB); 
});