admin管理员组文章数量:1334369
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
2 Answers
Reset to default 11You 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);
});
本文标签: Javascript Sort li items alphabetically by data attribute without jqueryStack Overflow
版权声明:本文标题:Javascript: Sort li items alphabetically by data attribute without jquery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742208716a2433302.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论