Question

我是jQuery的新手，我想采用未排序的列表并执行以下操作：http://i.min.us/idAMoq.png

如何根据开头的字母完成分隔列表项？

谢谢！

Answer 1

我使用了这个示例HTML：

<ul>
<li>Array</li>
<li>Beta</li>
<li>Application</li>
<li>Revolver</li>
<li>Pilot</li>
</ul>

在<head>中包含jQuery库：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

jQuery（在UL或$(function(){/*code here*/})之后添加）：

var output={};
$('ul li').each(function(i,v){
    var l=$(this).text().substring(0,1).toUpperCase();
    if(typeof(output[l])=="undefined") output[l]=[];
    output[l].push($(this).text());
});
$('ul').empty();
for(var i in output){
    $('ul').append('<li><p>'+i+'</p></li>');
    for(var j in output[i]){
        $('ul').append('<li>'+output[i][j]+'</li>');
    }
}

最后你会得到这个HTML：

<ul>
<li><p>A</p></li>
<li>Array</li>
<li>Application</li>
<li><p>B</p></li>
<li>Beta</li>
<li><p>R</p></li>
<li>Relolver</li>
<li><p>P</p></li>
<li>Pilot</li>
</ul>

嗨，小更新，纯JS版本应该使用原型，jQuery或没有任何：）

var output={},string="";
var myul=document.getElementById('list');
var myli=myul.getElementsByTagName('li');
for(var x=0;x<myli.length;x++){
    var l=myli[x].innerHTML.substring(0,1).toUpperCase();
    if(typeof(output[l])=="undefined") output[l]=[];
    output[l].push(myli[x].innerHTML);
}

for(var i in output){
    string+='<li><p>'+i+'</p></li>';
    for(var j in output[i])string+='<li>'+output[i][j]+'</li>';
}
myul.innerHTML=string;

只需将其粘贴在代码下方或任何onload / ready语句中即可。

干杯

-G。

在jQuery中单独分类未分类的列表？

1 个答案: