javascript - 根据文本对 div 进行排序仅有效一次

Question

我有以下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 的地方没有任何变化。

我是做错了什么，还是遗漏了什么？

谢谢!

Answer 1

您需要像这样在排序功能中 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/