javascript - 按字母顺序对页面上的元素进行排序
问题描述
我正在尝试在按钮单击时对页面上 div 的文本内容进行排序。
JS 小提琴链接: https ://jsfiddle.net/Jamescodes/4k7xonqv/188/
HTML
<button id="myBtn">
Sort Em!
</button>
<div class="red sortme">Steve</div>
<div class="orange sortme">Dex</div>
<div class="yellow sortme">Bob</div>
<div style="color: green;" class="sortme">Colin</div>
<div class="cyan sortme">James</div>
<div class="blue sortme">Margie</div>
<div class="purple sortme">Albert</div>
CSS
.red {
color: red;
}
.orange {
color: orange;
}
.yellow {
color: yellow;
}
.cyan {
color: cyan;
}
.blue {
color: blue;
}
.purple {
color: purple;
}
div.sortme {
text-align: center;
padding: 2px;
max-width: 5rem;
background-color: hsl(0, 0%, 0%, 0.85);
border-radius: 5px;
}
button {
margin: 5px;
padding: 5px;
border-radius: 5px;
}
JavaScript
function sortThem(s) {
console.log('sorting');
Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort(ea, eb) {
var a = ea.textContent.trim();
var b = eb.textContent.trim();
console.log(a, b);
if (a.textContent < b.textContent) return -1;
if (a.textContent > b.textContent) return 1;
return 0;
}).forEach(function(div) {
div.parentElement.appendChild(div);
});
}
// call it like this
document.getElementById("myBtn").addEventListener("click", function() {
sortThem('div.sortme')
});
当我在点击时调用函数时,div 没有像我期望的那样被排序。有人可以帮我理解为什么吗?
解决方案
也许将它放在这样的父容器中更安全,并简化您的代码。
const sortThem = (parentId, selector) => {
const parent = document.getElementById(parentId);
const divs = [...parent.querySelectorAll(selector)];
divs.forEach(div => div.remove());
divs.sort((a, b) => (a.innerText > b.innerText) ? 1 : -1);
divs.forEach(div => parent.append(div));
}
document.getElementById("myBtn").addEventListener("click", function() {
sortThem('parent', 'div.sortme')
});
.red {
color: red;
}
.orange {
color: orange;
}
.yellow {
color: yellow;
}
.cyan {
color: cyan;
}
.blue {
color: blue;
}
.purple {
color: purple;
}
div.sortme {
text-align: center;
padding: 2px;
max-width: 5rem;
background-color: hsl(0, 0%, 0%, 0.85);
border-radius: 5px;
}
button {
margin: 5px;
padding: 5px;
border-radius: 5px;
}
<button id="myBtn">
Sort Em!
</button>
<div id="parent">
<div class="red sortme">Steve</div>
<div class="orange sortme">Dex</div>
<div class="yellow sortme">Bob</div>
<div style="color: green;" class="sortme">Colin</div>
<div class="cyan sortme">James</div>
<div class="blue sortme">Margie</div>
<div class="purple sortme">Albert</div>
</div>
推荐阅读
- java - spring如何在mongoDB中查询过滤
- flutter - Flutter 在 Stack 小部件中显示 2 小部件
- sql - 如何创建触发器以发送电子邮件
- c# - c#中的并行任务性能
- javascript - 如何将应用程序状态保存到 cookie
- xml - 如何在 Android Studio 中创建可滚动的线性布局?
- azure - Graph Api 响应中的 nextLink 不是绝对 Uri
- c# - Http Utility '在当前上下文中不存在(API 帮助)
- python - 对多个 CSV 中的值求和 python
- sql-server - T-SQL 到 XML 的嵌套和拆分