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

时间:2016-01-11 13:35:55

标签: javascript jquery sorting

我动态生成文件夹列表,显示如下:

<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中,但我不知道该怎么做....

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

本地js方式。

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

你使用了错误的选择器(也缺少类选择器中的。),试试这个:

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