JQuery：按字母顺序显示和细分数据库检索到的元素

我从数据库中检索了一个名称列表，并在jsp页面中按字母顺序显示它们

在页面顶部，我希望有一个可点击的字母表，这样通过点击一个字母，用户就可以进入右侧部分

有没有jquery插件可以实现这一点？还是

编辑

A、B、C。。。。（如果有以A开头的元素，则A为链接）

A 苹果

B 香蕉 书

C

编辑2

我正在尝试使用jquery listnav插件

在jsp文件中，我有：

<script type="text/javascript" src="js/jquery.listnav-2.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('#myList').listnav();
    });
</script>

---

我不明白我错在哪里。

如果我理解正确，您希望根据第一个字母分割数据，然后允许用户能够根据该字母过滤一组结果，对吗

这不是一个jquery插件，其他人可能会编写更好的东西，但我已经为您编写了一个JSFIDLE

它的基本工作方式是向它传递一个字符串数组，它将读取该数组，并将从每个字符串的第一个字母中找到的字母表中的每个字母的数据拆分为单独的数组。然后，它将为它们中的每一个创建一个按钮，单击该按钮后，仅显示该数据

实际上，这只是大量使用

for

循环的一种情况，因此它的加载速度可能非常慢，但一旦加载，它的性能应该会很好

另一种方法是每次遍历整个数组，只选择与单击的第一个字母匹配的项，这将缩短加载时间，但对于一般使用来说，速度要慢得多

---

编辑-我现在已经创建了这个的模块化版本，因此您可以简单地用数组实例化

AlphaSplit

的新实例，然后对其调用.create（）方法。您可以看到一个工作版本。

您可以按名称从数据库中检索订单吗？@PSR：我想可以，但我想对它们进行细分（我编辑了我的问题），我想获得类似的结果（您想要的JSFIDLE示例缺少什么？

<div id="myList-nav"></div>
<ul id="myList">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>

TypeError: $(...).listnav is not a function
error source line: $('#myList').listnav();