選擇的第一個字母，並把它的內容組

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