Question

I am currently using this JavaScript to change the color of the second word in each of my widget titles. But with this code, as it loops through each widget, it ends up printing all of the titles, from all of the widgets on the page, in each widget title. So for example, I have two widgets with titles “Recent Work” and “Recent Press”. Work and Press are supposed to be orange. With this code, it outputs “Recent WorkRecent Press”, where Work and Recent are both orange. This is printed the same in both widget titles. How can I edit this so it makes just the second, or last since each title will only be two words long, word orange?

var split = $("h4.widgettitle").text().split(" ");

if(split.length > 0) {
$("h4.widgettitle").html('').append("<span class='firstWord'>" + split[0] + "<span> ");

if(split.length > 1) {
    $("h4.widgettitle").append("<span class='secondWord'>" + split[1] + "<span> ");
    for(var i=2;i<split.length;i++) {
        $("h4.widgettitle").append(split[i] + " ");
    }
  }
}

Answer 1

Quickest way:

$('h4.widgettitle').each(function(){

    var text = $(this).text().split(' ');
    if(text.length < 2)
        return;

    text[1] = '<span class="secondWord">'+text[1]+'</span>';

    $(this).html( text.join(' ') );

});

See it running