den ersten Buchstaben und legte sie über den Inhalt Gruppe

Question

Ich habe eine Liste, die ein bisschen wie folgt aussieht:

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

Ich möchte nun den ersten Buchstaben des Inhalts über den Inhalt Gruppe hinzuzufügen. Hier

ist ein Beispiel dafür, wie das Ergebnis aussehen würde:

<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> 

Wie kann ich das tun?

Answer 1

Ziemlich einfach mit jQuery - siehe die Code-Kommentare für die Erklärung.

// 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