Question

我动态生成文件夹列表，显示如下：

<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＆＃39; filename_container＆＃39;中的文本对它们进行排序。为此，我尝试以下操作，但我无法使其成功：

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>＆＃39; file_container＆＃39;进行排序。因此不要将整个代码附加到一个li中，但我不知道该怎么做....

Answer 1

获取sort函数

中的“文件名”

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);
}

Answer 2

本地js方式。

＆＃13;

// get the results as a HTMLCollection
var
  list = document.querySelector('.listDocs'),
  results = document.querySelectorAll('.docResult');

console.log(results);

// use array sort to change the order of the HTMLCollection
var sliced = Array.prototype.slice.call(results, 0);

sliced.sort(sortByElementText('.filename_container'));

// remove the list items from the list
list.innerHTML = '';

// replace the list items in the correct order
sliced.reduce(function(list, item) {
  list.appendChild(item);
  return list;
}, list);

console.log( document.querySelectorAll('.docResult') );

// helper function to sort by a particular child element
function sortByElementText(selector) {
  return function(a, b) {
    var bContainer = b.querySelector(selector).innerText;
    var aContainer = a.querySelector(selector).innerText;
    return aContainer > bContainer;
  }
}

＆＃13;

<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<ul class="listDocs">
  <li class="docResult" id="result3">
    <div class="filename_container" id="file2" data-file="./cases/zzz.doc">zzz.doc</div>
  </li>
  <li class="docResult" id="result1">
    <div class="filename_container" id="file1" data-file="./cases/xxx.doc">xxx.doc</div>
  </li>
  <li class="docResult" id="result2">
    <div class="filename_container" id="file3" data-file="./cases/yyy.doc">yyy.doc</div>
  </li>
</ul>

＆＃13;

Answer 3

你使用了错误的选择器（也缺少类选择器中的。），试试这个：

SELECT * FROM t ORDER BY st REGEXP '^[[:alpha:]].*', st+0, st ;

按其中一个元素的值对动态生成的列表进行排序

3 个答案: