我动态生成文件夹列表,显示如下:
<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中,但我不知道该怎么做....
答案 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方式。
// 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;
答案 2 :(得分:0)
你使用了错误的选择器(也缺少类选择器中的。),试试这个:
SELECT * FROM t ORDER BY st REGEXP '^[[:alpha:]].*', st+0, st ;