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

您需要附加新排序的项目。

＆＃13;

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)});

＆＃13;

<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>

＆＃13;

这是因为原生.sort()方法不是DOM方法;它只是对任意数组项列表进行排序。因此，通过附加新排序的项，它将新的元素顺序提交给DOM。

请注意，上面的简单解决方案假设它们共享同一个父级。

这是一个具有现代语法和方法的版本：

＆＃13;

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));

＆＃13;

<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>

＆＃13;

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);
});

Javascript：按数据属性按字母顺序对li项目排序，不带jquery

2 个答案: