[Solved] Pick the first letter and put it above the content group

by


Fairly simple with jQuery – see the code comments for explanation.

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

3

solved Pick the first letter and put it above the content group