我有以下html代码:
<div class="dropzone">
<div class='kenmerk_path' data-id='301' data-pk-id='26'>
elektriciteit -> 220 volt
</div>
<div class='kenmerk_path' data-id='271' data-pk-id='31'>
poort -> aantal per ratio van 1/x m²(aantal)
</div>
<div class='kenmerk_path' data-id='202' data-pk-id='68'>
faciliteiten -> aanmeldingsloket
</div>
...
<div class='kenmerk_path' data-id='149' data-pk-id='47'>
elektriciteit -> 250/380 volt
</div>
</div>
我想根据其中的文本对内部 div 进行排序。 所以使用下面的方法:
function orderDropzone(){
var mylist = $('.dropzone');
var listitems = mylist.children('div').get();
listitems.sort(sort_asc);
$.each(listitems, function(index, item) {
mylist.append(item);
});
}
function sort_asc(a, b){
return ($(b).text()) < ($(a).text()) ? 1 : -1;
}
我对它们进行排序,这是第一次成功。
但是我在 .dropzone 的末尾动态添加了另一个 div,并再次调用该函数,但它不会再次对列表进行排序。
我使用以下代码添加新部门:
function addKenmerk(item){
var new_kenmerk = "<div class='kenmerk_path' data-id='200'>
aansluiting -> water
</div>";
$('.dropzone').append(new_kenmerk);
orderDropzone();
}
因此,我希望首先放置新添加的 div 的地方没有任何变化。
我是做错了什么,还是遗漏了什么?
谢谢!
最佳答案
您需要像这样在排序功能中 trim 文本:
function orderDropzone(){
var mylist = $('.dropzone');
var listitems = mylist.children('div').get();
listitems.sort(sort_asc);
$.each(listitems, function(index, item) {
mylist.append(item);
});
}
function sort_asc(a, b){
return ($.trim($(b).text())) < ($.trim($(a).text())) ? 1 : -1;
}
$(function() {
function addKenmerk(item){
console.log('test');
var new_kenmerk = $("<div class='kenmerk_path' data-id='200'> \
aansluiting -> water \
</div>");
$('.dropzone').append(new_kenmerk);
orderDropzone();
}
orderDropzone();
addKenmerk();
});
这是一个有效的 jsFiddle:http://jsfiddle.net/pnMWZ/
关于javascript - 根据文本对 div 进行排序仅有效一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21929750/