Question

如何使用jquery通过asc和desc更改每个html包装内部标记值之一？

<div class="wrap_0">
    <div class="sort_by">0</div>
</div>
<div class="wrap_1">
    <div class="sort_by">3</div>
</div>
<div class="wrap_2">
    <div class="sort_by">1</div>
</div>

更改为

<div class="wrap_0">
    <div class="sort_by">0</div>
</div>
<div class="wrap_2">
    <div class="sort_by">1</div>
</div>
<div class="wrap_1">
    <div class="sort_by">3</div>
</div>

现在我只找到排序一个内部div的方法

var items = $('.wrap div').get();
items.sort(function(a,b){
    var keyA = $(a).text();
    var keyB = $(b).text();

if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
    return 0;
});
var wrap = $('.wrap');
$.each(items, function(i, sort_by){
    wrap.append(sort_by);
});

Answer 1

这个怎么样？它使用以wrap_开头的类获取所有元素，找到具有类sort_by的子div并比较每个元素。排序后，它会迭代每个并按正确的顺序将它附加到父/包装元素（在本例中为body）：

$("div[class^='wrap_']").get().sort(function(a, b) {
   var idx = parseInt($(a).find(".sort_by").text(),10);
   var idx2 = parseInt($(b).find(".sort_by").text(),10);
   return idx > idx2;
}).each(function() {
   $(this).appendTo("body");
});

请参阅fiddle

Answer 2

这是一个简单的解决方案，即使元素不在主体的根部或不是它们容器的第一个元素，它也能工作：

var s = $('[class^=wrap_]').get().sort(function(a,b){
   return parseInt($('.sort_by', a).html(),10)-parseInt($('.sort_by', b).html(),10)
});
for (var i=s.length;i>0;i--) $(s[i]).insertAfter(s[0]);

Demonstration

根据子节点的数值以ASC或DESC顺序排列div？

2 个答案: