Question

我试图用tSort对jQuery选择的结果进行排序。

HTML：

<div sort="2"></div>
<div sort="3"></div>
<div sort="1"></div>
<div sort="4"></div>
<div sort="6"></div>
<div sort="5"></div>

使用Javascript：

<script>
    $sort_order = $('div').tsort({attr:'sort'});
</script>

我希望结果为： jQuery对象中的1,2,3,4,5,6，尚未插入到页面中。这可以用tSort，还是我应该编写自己的算法？

Answer 1

如果存在所有div元素的包装，则更容易实现。

HTML：

<div id="wrapper">
<div sort="2">2</div>
<div sort="3">3</div>
<div sort="1">1</div>
<div sort="4">4</div>
<div sort="6">6</div>
<div sort="5">5</div>
</div>

Javascript（使用jQuery）：

var $wrapper = $('#wrapper');
$wrapper.find('div').sort(function (a, b) {
    return +a.getAttribute('sort') - +b.getAttribute('sort');
})
.appendTo($wrapper);

Working demo

在回复@Tim的评论时，即使没有jQuery，也可以轻松地将sort元素后面没有wrapper属性的元素放在<div id="wrapper"> <div style="color:red;">red color, without sort attribute</div> <div style="color:red;" sort="7">red color (sort attribute=7)</div> <div sort="2">2</div> <div sort="3">3</div> <div sort="1">1</div> <div sort="4">4</div> <div sort="6">6</div> <div sort="5">5</div> </div>元素的后面

假设这是您的HTML：

sort

您可以将此作为您的Javascript放置在不具有// As shown earlier above, var $wrapper = $('#wrapper'); $wrapper.find('div').sort(function (a, b) { return +a.getAttribute('sort') - +b.getAttribute('sort'); }) .appendTo($wrapper); // New code to add: var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++) { if(divs[i].getAttribute('sort') == null || divs[i].getAttribute('sort') == undefined) { divs[i].parentNode.appendChild(divs[i]); } }属性的元素中：

{{1}}

Working demo

Answer 2

在使用.tsort

之前克隆它

 $sort_order = $('div').clone().tsort({attr:'sort'});

DEMO

tSort on jQuery对象

2 个答案: