我有几个这样的div
<div rel="5">
Divs content goes here
</div>
<div rel="3">
Div 3 Here
</div>
<div rel="4">
Div 4 Here
</div>
<div rel="4.5">
Div 4.5 here
</div>
您将如何使用 Jquery 对 div 进行排序,以便在 DOM 中对它们进行物理排序,首先使用最少的 rel 属性?
例如 3、4、4.5、5
我有几个这样的div
<div rel="5">
Divs content goes here
</div>
<div rel="3">
Div 3 Here
</div>
<div rel="4">
Div 4 Here
</div>
<div rel="4.5">
Div 4.5 here
</div>
您将如何使用 Jquery 对 div 进行排序,以便在 DOM 中对它们进行物理排序,首先使用最少的 rel 属性?
例如 3、4、4.5、5
看我的小提琴:http: //jsfiddle.net/6hpNz/8/
您可以利用 javascript 和 jQuery 的组合很容易地做到这一点:
给定以下 HTML:
<div class="unsorted">
<div rel="5">
Div 5 here
</div>
<div rel="3">
Div 3 Here
</div>
<div rel="4.5">
Div 4.5 here
</div>
<div rel="4">
Div 4 Here
</div> </div>
<div class="sorted"></div>
此脚本将为您提供所需的输出:
$(document).ready(function () {
var sortedDivs = $(".unsorted").find("div").toArray().sort(sorter);
$.each(sortedDivs, function (index, value) {
$(".sorted").append(value);
});
});
function sorter(a, b) {
return a.getAttribute('rel') - b.getAttribute('rel');
};
我确信有一种更有效的方法,但无论如何这是我的答案:
HTML:
<div rel="5">
Divs content goes here
</div>
<div rel="3">
Div 3 Here
</div>
<div rel="4">
Div 4 Here
</div>
<div rel="4.5">
Div 4.5 here
</div>
jQuery:
var array = new Array();
$('div').each(function(){
array.push($(this).attr('rel'));
});
array = array.sort();
var reordedDivs = "";
$.each(array, function(i, obj1){
$('div').each(function(j, obj2) {
if ($(obj2).attr('rel') == obj1) {
var divContent = $(obj2).html();
var rel = obj1;
reordedDivs += "<div rel='" + rel + "'>" + divContent + "</div>";
}
});
});
$('body').html(reordedDivs);
小提琴:http: //jsfiddle.net/F6csV/17/
您可以使用 DOM 方法选择元素,将 DOM 列表转换为 Array,然后使用Array.sort()
.