我动态生成一个文件夹中的文件列表,如下所示：

<ul class="listDocs">
  <li class="docResult">
    <div class="file-icon"><i class="fa fa-file-word-o"></i></div>
    <div class="filename_container" id="file_2" data-file="./cases/xxx.doc" data-folder="">xxx.doc</div>
    <div class="file_download"><a href="./cases/xxx.doc" target="_blank"><i class="fa fa-download"></i></a></div>
    <div class="btn_remove_style file-remove fa fa-trash-o" data-file="./cases/xxx.doc"></div>
  </li>
  <li class="docResult">...

我想添加一些按钮,这些按钮使我可以根据各种条件对文件进行排序.我首先尝试按div’filename_container’中的文本对它们进行排序.为此,我尝试以下操作,但无法使其正常工作：

function sortFilesByText () {
    var list = $('.listDocs');
    var listItems = list.find('filename_container').sort(function(a,b) {  
      return $(a).text() - $(b).text();
    });
    list.find('li').remove();
    list.append(listItems);
}

$(document).on('click', '#btn_sort_name', function () {
    sortFilesByText();
});

我知道这样做只能对< div> ‘file_container’,因此不要将整个代码附加到一个li内,但是我不知道该怎么做.

解决方法:

在排序函数中获取“文件名”

function sortFilesByText() {
    var list = $('.listDocs'),
        listItems = list.find("li").sort(function (a, b) {
            var fileA = $(a).find(".filename_container").text(),
                fileB = $(b).find(".filename_container").text();

            if (fileA == fileB) return 0;
            return (fileA > fileB) ? 1 : -1;
        });

    list.find('li').remove();
    list.append(listItems);
}