在附加Jquery期间基于字母排序div数组

Question

我被困在一个地方，我必须在按钮点击时移动这些列表时对名称列表进行排序。

sort()

方法工作正常，但再次单击同一个按钮创建重复项！，这不是我需要的。

我有什么方法可以解决这个问题。在代码下面使用（从stackoverflow获取），即使这不起作用。

function SortByName(a, b) {
    var aName = a.name.toLowerCase();
    var bName = b.name.toLowerCase();
    return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
}
var selectArr = selectedList.sort(SortByName);

我的代码

 $(document).on('click', '#buttonAdd', function (e) {
    var divCount = $('#SelectedEmployeeList').find('div').length;
    if (divCount === 0) {
        selectedList = []; // Clearing the list, to add fresh employee list.           
    }
    $('#EmployeeList :selected').each(function (i, selected) {
        selectedList[$(selected).val()] = $(selected).text();            
    });

    // Returning DOM node from collection.
    var empListNode = $("#SelectedEmployeeList")[0];
    console.log(empListNode);
    while (empListNode.firstChild) {
        empListNode.removeChild(empListNode.firstChild);
    }

    for (var empID in selectedList) {
        $("#SelectedEmployeeList").append("<div class= EmpList id=" + empID + ">" + selectedList[empID] + " <span class='close'>&times;</Span> </div>");
    }
});

这是所有排序都应该发生的地方#SelectedEmployeeList。

分享了参考图片。

排序正确地发生在左侧，如下所示：

点击＆＃34;全部添加＆gt;＆gt; ＆＃34;项目已移动但未排序：

任何帮助将不胜感激。

更新1：

Answer 1

这是你的问题：

for (var empID in selectedList) {
        $("#SelectedEmployeeList").append("<div class= EmpList id=" + empID + ">" + selectedList[empID] + " <span class='close'>&times;</Span> </div>");
}

For...in以无顺序迭代对象。将您的员工保存在一个数组中并迭代它：

var selectedList = [];
$('#EmployeeList :selected').each(function (i, selected) {
        // push an object into the selectedList array
        selectedList.push({
            empID : $(selected).val(),
            text: $(selected).text(),
            div: selected
         });            
});

// iterate over the array in order
for (var i = 0; i < selectedList.length; i++) {
        // appends a NEW div
        $("#SelectedEmployeeList").append("<div class= EmpList id=" + selectedList[i].empID + ">" + selectedList[i].text + " <span class='close'>&times;</Span> </div>");
        // MOVES the div
        $("#SelectedEmployeeList").append(selectedList[i].div);
}