选择的第一个字母，并把它的内容组

Question

上面我有一个列表，它看起来有点像这样：

<ul class="mylist"> 
    <li>AAA</li> 
    <li>AAA</li> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>BBB</li> 
    <li>CCC</li> 
</ul> 

我现在想添加的内容组上述内容的第一个字母。

这里的结果会怎样看一个例子：

<ul class="mylist"> 
    <li><strong>A</strong></li> 
    <li>AAA</li> 
    <li>AAA</li> 
    <li>AAA</li> 
    <li><strong>B</strong></li> 
    <li>BBB</li> 
    <li>BBB</li> 
    <li><strong>C</strong></li> 
    <li>CCC</li> 
</ul> 

我怎样才能做到这一点？

Answer 1

jQuery相当简单 - 请参阅代码注释以获得解释。

// shorthand for on document load 
$(function() { 
    // a variable to store our current first letter 
    var currentFirstLetter; 

    // for every child of mylist 
    $('.mylist').children().each(function() { 

    // take the first character of its content 
    var thisLetter = $(this)[0].innerHTML.substr(0,1).toLowerCase(); 

    // if its different to our current first letter then add the required element 
    // and update our current first letter 
    if (thisLetter !== currentFirstLetter) { 
     $(this).before("<li><strong>" + thisLetter.toUpperCase() + "</strong></li>"); 
     currentFirstLetter = thisLetter; 
    } 
    }); 
}); 

jsFiddle