Javascript JQuery通过拆分段落更改页面中的文本

我有一个基于wordpress的站点，其中的小部件标题如下

• 按类别浏览
• 购物车
• 时事通讯
• 社区投票
• 等

现在，我想用蓝色显示每个小部件的第一个单词，其余单词用黑色显示。
我该怎么做

（即浏览、购物、时事通讯、蓝色社区、黑色休息）

我想，我们可以使用jQuery来实现这一点，但我不知道如何实现

编辑：

---

站点：

我的首选解决方案是使用WordPress钩子作为小部件标题

function my_widget_title($title) {
    $parts = explode(" ", $title);
    $return = '<span class="first">' . array_shift($parts) . '</span>';
    if (sizeof($parts) > 0)
        $return .= implode(" ", $parts);
    return $return;
}

add_filter('widget_title', 'my_widget_title');

函数我的小部件标题（$title）{
$parts=分解（“，$title”）；
$return=''.array\u shift（$parts）。''；
如果（sizeof（$parts）>0）
$return.=内爆（“，$parts”）；
return$return；
}
添加过滤器（“小部件标题”、“我的小部件标题”）；

我还没有测试过它，但理论上，这个函数应该将小部件标题拆分为单词，在第一个单词周围添加

，然后返回新的小部件标题，您可以使用CSS进行样式设置

---

您可以将这些行添加到主题的

functions.php

，或者更好的做法是，为您正在使用的主题创建一个子主题并将其添加到那里。这样，当主题更新时，它不会被覆盖。

您可以尝试这样做，获取迭代所有

.widget title

，获取其文本，按空格分割并使用

更改第一个单词，然后加入所有单词并在

.widget title

html中设置。像

$('.widget-title').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    words[0] = "<span style='color:blue;'>"+words[0]+"</span>";
    $(this).html(words.join(' '));
});

或者，如果你想在你的页脚一样，那么你可以试试这个

$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    $(this).html(words[0] + ' <span style="color:#333333;">' + words.slice(1).join(' ') + '</span>');
});

$（'.widget h3'）。每个（函数（）{
var$title=$（this.text（）；
变量词=$title.split（“”）；
$（this.html（words[0]+''+words.slice（1）.join（''）+''）；
});

使用JavaScript的split（）方法分离单词，然后将CSS应用于数组中的第一个单词。然后使用JavaScript的join（）方法将它们重新组合在一起。这一切都在谷歌上实现，并不难做到。我找到了一些解决方案，但当我尝试这么做时，所有的事件都被第一次发生的事件所取代。我明白，我需要使用

每个
方法，但我不知道在哪里传递，我使用了下面的链接来实现上面的事情你尝试了什么？你能给我们看一下你的代码，这样我们就可以帮助修复它了吗？我添加了一个链接，从中我得到了帮助，还有我现在在上面的评论中面临的问题，请检查，谢谢你说“小部件有标题”，我们需要查看标记。你需要展示你已经尝试过的东西，否则人们可能不会帮助你。谢谢你，这是一个很棒的代码，但它不适用于所有的小部件，它只适用于一些小部件。我的网站是granitess.com/wp，你可以在那里看到，再次感谢。正如我所说，我没有测试它。没有在你的主题中使用它，我只能猜测。您可以尝试使用优先级，请参阅。另外，通过
$title
参数检查实际输入的内容，可能您必须考虑已经存在的html标记。感谢我将测试并让您知道的答案您好，这不起作用，您可以查看站点并建议我回答吗
$('.widget h3').each(function(){
    var $title = $(this).text();
    var words = $title.split(' ');
    $(this).html(words[0] + ' <span style="color:#333333;">' + words.slice(1).join(' ') + '</span>');
});