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首先放在哪里，没有任何改变。

我做错了什么，还是我错过了什么？

日Thnx！

Answer 1

您需要在排序函数中修剪文本，如下所示：

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/

Answer 2

它似乎不正确Javascript。要编写多行字符串，您必须在每行的末尾添加反斜杠（\）：

var new_kenmerk = "<div class='kenmerk_path' data-id='200'> \
                       aansluiting -> water \
                   </div>";

顺便说一下，不推荐在Javascript中使用多行字符串，因为人们忘记了空格，但在你的情况下它是安全的。

Answer 3

你需要像这里一样添加新项目：

http://jsfiddle.net/setec/Z8amc/3/

function addKenmerk(item){
    var new_kenmerk = $("<div class='kenmerk_path' data-id='200'> aansluiting -> water  </div>");
    $('.dropzone').append(new_kenmerk);
    orderDropzone();
}

基于文本排序div仅适用一次

3 个答案: