-1

我目前正在使用这个 JavaScript 来更改每个小部件标题中第二个单词的颜色。但是使用这段代码，当它遍历每个小部件时，它最终会打印页面上所有小部件的所有标题，并在每个小部件标题中。例如，我有两个标题为“近期工作”和“近期新闻”的小部件。Work and 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] + " ");
    }
  }
}
4

2 回答 2

2

最快的方法：

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

});

看到它运行

于 2012-09-05T01:52:55.470 回答
0

这些方面的东西应该适合你。无论标题中有多少单词，它都会将所有 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);
})​​

检查一下小提琴哟

于 2012-09-05T01:55:33.303 回答