Question

在以下HTML中：

<ul class="list">
<li class="item pr1">....</li>
<li class="item pr0">....</li>
<li class="item pr4">....</li>
<li class="item pr3">....</li>
</ul>

我想创建一个重新排序＆＃34; li＆＃34;得到这样的结果：

<ul class="list">
<li class="item pr0">....</li>
<li class="item pr1">....</li>
<li class="item pr2">....</li>
<li class="item pr3">....</li>
</ul>

这可以在不必遍历所有项目的情况下实现吗？谢谢你的帮助

Answer 1

类通常用于将元素组合在一起，而不是唯一地标识它们......如果您可以使用id或data-属性1,2,3等来让我们的生活更轻松，你可以这样做：

＆＃13;

$(":input").click(function() {
  $("ul li").sort(function(a, b) {
    return $(a).data("no") - $(b).data("no");
  }).appendTo("ul");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="item" data-no="1">..1..</li>
  <li class="item" data-no="0">..0..</li>
  <li class="item" data-no="4">..4..</li>
  <li class="item" data-no="3">..3..</li>
</ul>
<input type="button" value="sort" />

＆＃13;

遗憾的是，如果您必须使用当前设置中显示的类名，您可以执行以下操作：

＆＃13;

$(":input").click(function() {
  $("ul li").sort(function(a, b) {
    return parseInt(a.className.split("pr")[1]) - parseInt(b.className.split("pr")[1]);
  }).appendTo("ul");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="item pr1">..1..</li>
  <li class="item pr0">..0..</li>
  <li class="item pr4">..4..</li>
  <li class="item pr3">..3..</li>
</ul>
<input type="button" value="sort" />

＆＃13;

_{但是如果稍后添加新类，这将会中断。}

Answer 2

正如评论中所提到的，如果不迭代所有项目是不可能的，但是使用jquery和内置的sort方法可以做到这一点：

var $lis = $('.list').children('li');

$lis.sort(function(l1, l2) {
    return $(l1).attr('class').localeCompare($(l2).attr('class'));
});

$lis.detach().appendTo($('.list'));

Answer 3

＆＃13;

$(function() {
  var order = $('li.item').sort(function(a,b) {
    var classA = $(a).attr('class').replace(/^.*(pr\d).*$/, '$1');
    var classB = $(b).attr('class').replace(/^.*(pr\d).*$/, '$1');
    return classB < classA;
  });
  $('ul.list').append( order );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
<li class="item pr1">1....</li>
<li class="item pr0">0....</li>
<li class="item pr4">4....</li>
<li class="item pr3">3....</li>
</ul>

＆＃13;

Answer 4

您可以使用detach和单个appendTo编写代码，如下所示：

$(".list > li").detach().sort(function(a, b) {
     return +$(a).attr("class").replace("item pr","") 
     - $(b).attr("class").replace("item pr","");
     }).appendTo("ul.list");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
<li class="item pr1">pr1</li>
<li class="item pr0">pr0</li>
<li class="item pr4">pr4</li>
<li class="item pr3">pr3</li>
</ul>

有关detach（）的更多信息：https://www.w3schools.com/jquery/html_detach.asp

重新排序＆＃34; li＆＃34; Jquery中按类名称的元素

4 个答案: