Question

我正在尝试使用以下脚本对具有特定属性（性别，级别，名称等）所显示属性的div列表进行排序：

HTML：

<div id="sortThis" class="col-xs-12 alert-container">
    <div id="1" class="container-element sortable box box-blue" data-gender="1" data-level="4" data-name="AAA">   <h3>AAA</h3><div class="panel-body">AAA is resp</div>
    </div>
    <div id="2" class="container-element sortable box box-pink" data-gender="2" data-level="3" data-name="DDD"><h3>DDD</h3><div class="panel-body">DDD is a s</div>
    </div>
    <div id="3" class="container-element sortable box box-blue" data-gender="1" data-level="2" data-name="FFF"><h3>FFF</h3><div class="panel-body">FFF has mad</div>
    </div>
    <div id="4" class="container-element sortable box box-pink" data-gender="2" data-level="4" data-name="CCC"><h3>CCC</h3><div class="panel-body">CCC has ma</div>
    </div>
    <div id="5" class="container-element sortable box box-pink" data-gender="2" data-level="2" data-name=EEE><h3>EEE</h3><div class="panel-body">EEE is a f</div>
    </div>
    <div id="6" class="container-element sortable box box-blue" data-gender="1" data-level="3" data-name="BBB"><h3>BBB</h3><div class="panel-body">BBB is an ou</div>
    </div>
</div>

<button id="sLevel" class="LbtnSort">Sort by Level</button><br/>
<button id="sGender" class="GbtnSort">Sort by Gender</button><br/>

JS：

var LdivList = $(".box");
LdivList.sort(function(a, b){ 
return $(a).data("level")-$(b).data("level")
});

var GdivList = $(".box");
GdivList.sort(function(a, b){ 
return $(a).data("gender")-$(b).data("gender")
});


/* sort on button click */
$("button.LbtnSort").click(function() {
$("#sortThis").html(LdivList);
});

/* sort on button click */
$("button.GbtnSort").click(function() {
$("#sortThis").html(GdivList);
});

当.sortable div是静态的时，排序工作正常，如jfiddle所示，但是如果动态生成#sortable div（即.sortable div）的内容（在这种情况下作为结果）一个表单提交），当按下排序按钮时，#sortable div的全部内容消失了，我似乎无法让它工作。

任何帮助或建议将不胜感激。

编辑：动态生成列表的代码如下 - 实际上它是一个AXAX表单提交，它从已排序的项目列表中提取数据并输出它们。

    $('#formStep2').submit(function(event) {
    // get the form data
    var studentArray = [];

    $(".listbox li").each(function() {
        studentArray.push({
            'name': ($(this).text()),
            'gender': ($(this).closest('ol').attr('id')).substr(0, 1),
            'level': ($(this).closest('ol').attr('id')).substr(2, 3),
            'topic': ($('input[name=topic]').val())
        })
    });
    var studentString = JSON.stringify(studentArray);
    console.log(studentString);
    var formData = {
        'students': studentString,
    };
    // process the form
    $.ajax({
            type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url: 'process_step2.php', // the url where we want to POST
            data: formData, // our data object
            dataType: 'json', // what type of data do we expect back from the server
            encode: true
        })
        // using the done promise callback
        .done(function(data) {

            if (!data.success) {
                // error handling to go here.....

            } else {
                $('.alert-container').empty();
                var obj = JSON.parse(data.message);

                //sort the array alphabetically by name (default status)
                var test = obj.sort(function(a,b){
                    var lccomp = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
                    return lccomp ? lccomp : a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
                });

                console.log(test);

                var i=0;
                test.forEach(function(st) {
                    console.log(st['name']);
                    var gen = (st['gender'] == 1) ? "blue" : (st['gender'] == 2) ? "pink" : NULL;
                    $('.alert-container').append('<div id="' + (i+1) + '" class="container-element sortable box box-' + gen + '" data-gender="' + st['gender'] + '" data-level="' + st['level'] + '" data-name="' + st['name'] + '"><h3>' + st['name'] + '</h3><div class="panel-body"><div class="col-xs-9"><i class="fa fa-quote-left fa-3x fa-pull-left fa-' + gen + '" aria-hidden=:true"></i>' + st['comment'] + '</div></div></div>');
                    i++;
                });
                // jump to the next tab
                var $active = $('.wizard .nav-tabs li.active');
                $active.next().removeClass('disabled');
                nextTab($active);
            }
        })
        // using the fail promise callback
        .fail(function(data) {
            // show any errors
            // best to remove for production
            console.log(data);
        });
    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

Answer 1

您正在使用代码内联定义LdivList和GdivList，以便在DOM准备好时定义它们。你必须在函数内包装那些函数的定义，并在点击时调用它：

$(document).ready(function(){
  $("button.LbtnSort").click(function() {
  $("#sortThis").html(GenerateLdivList);
  });

  /* sort on button click */
  $("button.GbtnSort").click(function() {
  $("#sortThis").html(GenerateGdivList());
  });
});


function GenerateLdivList(){
  var LdivList = $(".box");
  LdivList.sort(function(a, b){ 
  return $(a).data("level")-$(b).data("level")
  });
}

function GenerateGdivList(){
  var GdivList = $(".box");
  GdivList.sort(function(a, b){ 
  return $(a).data("gender")-$(b).data("gender")
  });
}

Answer 2

正如@theduke所说，在你对它们进行排序时，列表可能是空的。这是一个简单的更改，它将在您单击按钮时读取和排序列表。（未经测试。）

var LdivList = function () {
  return $(".box").sort(function(a, b){ 
    return $(a).data("level")-$(b).data("level")
  });
};

var GdivList = function () {
  return $(".box").sort(function(a, b){ 
    return $(a).data("gender")-$(b).data("gender")
  });
};


/* sort on button click */
$("button.LbtnSort").click(function() {
  $("#sortThis").html(LdivList());
});

/* sort on button click */
$("button.GbtnSort").click(function() {
  $("#sortThis").html(GdivList());
});

当动态生成div时，div排序不起作用

2 个答案: