Jquery 错误地按 id 对 <li> 进行排序
Jquery incorrectly sort <li> by id
我有这个<li>
按 id 排序:
<ul id="members-list">
<li id="member_8">
<li id="member_4">
<li id="member_7">
<li id="member_12">
<li id="member_11">
<li id="member_13">
<li id="member_5">
<li id="member_6">
<li id="member_9">
<li id="member_3">
<li id="member_2">
<li id="member_1">
<li id="member_10">
</ul>
我使用的代码:
<script>
$( document ).ready(function() {
$("li[id*='member_']").sort(function (a, b) {
return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''));
}).each(function () {
var elem = $(this);
elem.remove();
$(elem).appendTo("ul#members-list");
});
});
</script>
结果是:
<ul id="members-list">
<li id="member_5">
<li id="member_8">
<li id="member_7">
<li id="member_1">
<li id="member_2">
<li id="member_3">
<li id="member_4">
<li id="member_6">
<li id="member_9">
<li id="member_10">
<li id="member_11">
<li id="member_12">
<li id="member_13">
</ul>
<li>
没有正确排序,什么会导致问题?
问题是您没有正确实现sort
函数。该函数应该返回一个正数、负数或零;你返回的是真/假。
因此,当 a.id 小于/等于 b.id 时,函数返回 false,该 false 为零;被视为 a.id 等于 b.id;这使排序函数偏离轨道。
解决方案是改变这一点:
return parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''));
对此:
return parseInt(a.id.replace('member_', '')) - parseInt(b.id.replace('member_', ''));
说了这么多,你可以使用 detach
和单个appendTo
重写代码,如下所示:
$("li[id*='member_']").detach().sort(function(a, b) {
return +a.id.replace("member_", "") - b.id.replace("member_", "");
}).appendTo("ul#members-list");
假设你两次没有相同的数字,你可以使用这个:
return (parseInt(a.id.replace('member_', '')) > parseInt(b.id.replace('member_', ''))) ? 1 : -1;
萨尔曼 答案适用于所有情况。
sort() 需要值 1,0,-1 作为返回值:Array.prototype.sort(),因此不应使用> 符号。
相关文章:
- 在jQuery UI中获取ul和li值,拖放即可排序
- 对具有相同类级别的不同li元素进行排序
- jQueryUI可排序-从可排序列表中删除li
- 我的Javascript(用于在ul中重新排序li)在IE中不起作用
- 按子元素 - jQuery 的数据 ID 对 li 进行排序
- 根据不同长度的数据属性对无序列表中的 li 进行排序(无 jquery)
- 使用 jQuery 对 li 进行排序
- 可排序的 Js 在带有选择/选项标签的 chrome 中不起作用,但与 ul/li 标签一起工作
- 排序并将 li 附加到 UL ASC
- 使用 JavaScript 或 jQuery 对 li 元素进行排序
- 如何通过单击链接或按钮重新排序ul-li列表
- 如何在javascript中获取当前ul li的长度,当我尝试对它们进行排序时
- 根据Datetime属性对LI元素进行排序
- yii2 ul-li菜单排序与foreach值
- 根据数字Id对li标签进行排序
- 重新排序ul li与图像
- 排序HTML "LI"按重复次数和字母顺序排列
- 排序列表ul->不同id的函数中的li
- 使用 JavaScript 对 li 元素重新排序
- 按 id 值对 li 进行排序