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>')
        })
    }
});

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>';
    }); 
 });

Jquery：改变第一个单词Color Span Issue

2 个答案: