最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Javascript: Sort li items alphabetically by data attribute without jquery - Stack Overflow

programmeradmin5浏览0评论

I'm trying to sort a list alphabetically only using javascript.

I've already none a similar function using jquery like this:

$('.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());
        });

But now I need to use just Javascript.

So far I've got:

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>

I'm trying to sort a list alphabetically only using javascript.

I've already none a similar function using jquery like this:

$('.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());
        });

But now I need to use just Javascript.

So far I've got:

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>

Share Improve this question asked Oct 3, 2017 at 14:21 Cátia RodriguesCátia Rodrigues 1502 silver badges10 bronze badges 2
  • what is the problem? – brk Commented Oct 3, 2017 at 14:23
  • It's not sorting alphabetically. It should return Test 1, Test 2, Test 3, Test 4. But it's returning test 1, test 3, test 2, test 4. – Cátia Rodrigues Commented Oct 3, 2017 at 14:26
Add a ment  | 

2 Answers 2

Reset to default 11

You need to append the newly sorted items.

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>

This is because the native .sort() method isn't a DOM method; it just sorts any arbitrary list of Array items. So by appending the newly sorted item, it mits the new element order to the DOM.

Note that the simple solution above assumes they all share the same parent.


Here's a version with modern syntax and methods:

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>

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);
});
发布评论

评论列表(0)

  1. 暂无评论