Javascript：按数据属性按字母顺序对li项目进行排序，而无需使用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方法； 它只是对数组项的任意列表进行排序。 因此，通过附加新排序的项目，它将新元素顺序提交给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);
});