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 标签中添加另一个跨度标签来破坏 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>')
        })
    }
});

Answer 2

我猜您正在尝试更改任何指定类元素的首次出现的颜色。为此，您无需更改整个 HTML

 $('.header-logo h1 ').find('.the-title').html(function(i, h){
    return h.replace(/\w+\s/, function(firstWord){
      return '<span style="color:Green;font-weight:bold">' + firstWord + '</span>';
    }); 
 });