Question

我目前正在使用此JavaScript来更改每个小部件标题中第二个单词的颜色。但是使用此代码，当它遍历每个小部件时，它最终会在每个小部件标题中打印来自页面上所有小部件的所有标题。例如，我有两个小部件，标题为“Recent Work”和“Recent Press”。工作和新闻应该是橙色的。使用此代码，它输出“Recent WorkRecent Press”，其中Work和Recent都是橙色。两个小部件标题中的打印方式相同。我怎么编辑这个，所以它只是第二个，或者最后一个，因为每个标题只有两个单词长，单词橙色？

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

最快的方式：

$('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

Answer 2

沿着这些方向的东西应该适合你。它将为所有h4.widgettitle元素中的第二个单词着色，无论标题中有多少单词。

$("h4.widgettitle").each(function(){
    var title_list = $(this).text().split(" ");
    var new_title = "";
    for (var i = 0; i < title_list.length; i++) {
        if (i == 1) {
            new_title += "<span class='secondWord'>" + title_list[i] + "</span> ";
        } else {
            new_title += "<span class='notSecondWord'>" + title_list[i] + "</span> ";
        }
    }
    $(this).html(new_title);
})

在fiddle yo

中查看

jQuery改变标题/标题中第二个单词的颜色

2 个答案: