How can I wrap a <span> around the first character in an object with jQuery

Question

I've been able to find and console.log the first characters that meet my criteria. I am trying to wrap a <span> tag around the characters but keep running into trouble. This is what I have so far.

$(document).ready(function () {
 $('.drop-cap').each(function(i,obj) {
  $(this).find("p").text().charAt(0).append("<span class='dropcap'>");
 })
});

Answer 1

Use can use the substring function to get part of a string which will allow you to separate the start from the end.

$(document).ready(function () {
    $('.drop-cap').each(function(i,obj) {
        var $p   = $(this).find("p"),
            text = $p.text();
        
        if(text.length === 0){
            // no text to be wrapped
            return;
        }

        $p.html('<span class="dropcap">' + text[0] + '</span>' + text.substring(1));
    })
});

ES6

$(document)
  .ready(() => {
      $('.drop-cap')
        .each((index, element) => {
            let $p   = $(element).find("p"),
                text = $p.text();
        
            if(text.length === 0){
                // no text to be wrapped
                return;
            }

            $p.html(`<span class="dropcap">${text[0]}</span>${text.substring(1)}`);
        });
  });