如何使用 jquery 搜索和排序 li 的集合？答案

【问题标题】：How do i search through and sort a collection of li's using jquery?如何使用 jquery 搜索和排序 li 的集合？
【发布时间】：2010-05-17 08:22:52
【问题描述】：

我有一些我想使用 jquery 排序和搜索的 li。

我找到了 http://plugins.jquery.com/project/TinySort 整理东西和 Search through a big list fast with jQuery 搜索 li 的。

是否有一个可以同时处理这两种事情（搜索+排序）的好插件，或者是否可以将上面链接中的两个解决方案结合起来？

编辑：简而言之，我正在寻找类似 @987654323@ 的东西，但它应该在带有 li 的 ul 上工作，而不是表

谢谢！

【问题讨论】：

标签： jquery html search sorting

【解决方案1】：

嗯，我总是喜欢在自己的代码中做这样的事情，因为差异太大。

一个好的开始是将所有 LI 对象保存在一个数组中（它已经拥有一些简单的排序方法）。

在数组中搜索和排序应该不是问题。

var li_elements = [];
for(var i = 0; i < 10; i++){
    var exampleli = $('<li/>', {text: 'I am an example', id: 'id'+i});
    li_elements.push(exampleli);
}

现在您可以排序/搜索/删除，最后将这些 li 添加到 UL 元素中。

【讨论】：

【解决方案2】：

也许最简单的方法是遍历所有 LI 项并将它们分配给您之后排序的数组：

var output = [];
$("LI.myclass").each(function()
{
    // Assumes your sort criteria is a numeric something in a class name.
    var res = $(this).attr("class").match(/\bmysome(\d+)\b/);
    if (!res) continue;
    output[res[1]] = this;
});

// output now contains all the LIs with numeric indexes according to your search
// criteria - sort them!
output.sort();

// Assign the LIs
$("UL#mylist").html("").append(output);

【讨论】：