jquery - 使用 jQuery 在 5 列中列出

Question

我有一个问题，将一个 ul 列表分成 5 个部分。该列表类似于：

<ul class="designer-list">  
<li>7 title</li>
<li>alpha</li>
<li>charlie</li>
<li>charles</li>
<li>lima</li>
</ul>    

用这个 jQuery 我把第一个字符放在上面

$(document).ready(function(){

    var lastCharacter = '';
    var list = $('ul.designer-list li');

    list.each(function() {
        var $this = $(this);
        var firstCharacter = $this.text().trim().charAt(0);
        if(firstCharacter != lastCharacter) {

            $this.before('<li class="first-character"><span>'+firstCharacter+'</span></li>');

            lastCharacter = firstCharacter;
        }
    });
});

这使得这个： 7 7 标题 A 阿尔法 C 查理查尔斯 L 利马

这很好用，但我想将列表分成 5 列。如果我尝试类似：

 $this.before('</ul></li><li class="first-character"><span>'+firstCharacter+'</span><ul>');

浏览器关闭标签。有人有想法吗？

我想要以下输出：

7     E      K      S     W
List  List   List   List  List
A     F      L      T     X
List  List   List   List  List

Answer 1

更新答案

检查演示http://jsfiddle.net/yeyene/2yg9e/4/

该演示将为 ul 中的所有列表创建第一个字符列表分隔符。

查询

$(document).ready(function(){
    $('ul.designer-list').each(function() {    
        var lastCharacter = '';
        var list = $(this).find('li');
        
        var e = '';
        list.each(function() {
            var $this = $(this);
            var firstCharacter = $this.text().trim().charAt(0);
            
            if(firstCharacter != lastCharacter) {
                e ='<li class="first-character">'+firstCharacter+'</li>';
                
                // if you want new ul, use this
                /*e ='<ul><li class="first-character">'+firstCharacter+'</li><ul>';*/
                
                lastCharacter = firstCharacter;
                $this.before(e);
            }            
        });        
    });    
});