是否可以使用 jQuery 对某些 div 重新排序。我有几个 div,我想根据 div 中的数据索引号在页面加载时重新排序它们。
Now:
<div class="score" data-index="3">3</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="1">1</div>
<div class="score" data-index="4">4</div>
我想要的是:
<div class="score" data-index="1">1</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="3">3</div>
<div class="score" data-index="4">4</div>
我相信这应该可以通过 jQuery 实现。我去每个 div 并获取数据索引号,但我如何进行实际排序:D
Thx!
编辑:有一件事是 HTML 中的顺序可能会因每个页面加载而异(顺序可以是 3,2,1,4 或 4,1,3,2 或任何其他)。
这是我现在唯一的 JS:
$("html .score").each(function(index, domEle) {
var score = $(domEle).attr("data-index");
alert(score);
});
只需获取数据索引号即可提醒它。
HTML
<div class="sortable">
<div class="score" data-index="3">3</div>
<div class="score" data-index="2">2</div>
<div class="score" data-index="1">1</div>
<div class="score" data-index="4">4</div>
</div>
jQuery
- - - - -上升
$('.sortable').each(function(){
var $this = $(this);
$this.append($this.find('.score').get().sort(function(a, b) {
return $(a).data('index') - $(b).data('index');
}));
});
---------降序
$('.sortable').each(function(){
var $this = $(this);
$this.append($this.find('.score').get().sort(function(a, b) {
return $(b).data('index') - $(a).data('index');
}));
});
现场演示 http://jsfiddle.net/Shef/RyEQU/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)