Jquery:更改第一个单词颜色跨度问题

Question

我正在尝试使用 jquery 更改定义类或标记的第一种颜色。事情进展顺利，但我有一个头衔有自己的跨度并带来麻烦。我使用下面的代码为第一个单词添加 span 元素和内联样式。

$(document).ready(function()
{

    $('.header-logo, h1').each(function() {
        var h = $(this).html();
        var index = h.indexOf(' ');
        if(index == -1) {
            index = h.length;
        }
        $(this).html('<span style="color:black;">' + h.substring(0, index) + '</span>' + h.substring(index, h.length));
    });

});

这完美地添加了span标签并改变了颜色。但我有一个标题，其 html 结构如下

<h1>
    <span id="fav" class="btn-fav"><a href="#"Add to fav</a></span>
    <span class="the-title">Title text goes here</span>
</h1>

在这里，我只想为“标题文本在此处”第一个单词(标题)添加颜色，但通过在 span 标签中添加另一个 span 标签来破坏 JavaScript 结构，如下所示

<span style="color:black;">
<span< span=""> class="btn-fav id="fav">.....

那么我该如何解决这个问题呢？

Answer 1

您可以使用html方法，html接受一个函数，您可以找到第一个单词并将其包装在span元素中。

$('h1 .the-title').html(function(i, html){
   return html.replace(/(\w+\s)/, '<span class="black">$1</span>')
})​;

http://jsfiddle.net/AuKWT/

请注意，您应该修复标记:

<span id="fav" class="btn-fav"><a href="#"Add to fav</a></span>
                                   ------^

<小时/>

$('.header-logo, h1').each(function() {
    var $this = $(this), $title = $this.find('.the-title');
    if ($title.length) {
        $title.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    } else {
        $this.html(function(i,h) {
            return h.replace(/(\w+\s)/, '<span class="black">$1</span>')
        })
    }
});