Jquery：链接的第一个单词颜色跨度问题

Question

当链接时，第一个单词出现问题，单词显示不正常。

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

当没有出现时，h3标签中的链接看起来不错

Answer 1

尝试这样的事情：http://jsfiddle.net/jnmwyagy/2/

<h3><a href="#">google</a><p><span class="text">First</span> Word</p></h3>
<h3><a href="#">google</a><p><span class="text">First</span> Word</p></h3>

的jQuery

 $('h3')
     .each(function () {
     $(this).find('.text').css("color", "red");
 });

Answer 2

尝试搜索开放的a标记，而不是空格。

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

严肃地说，最好只为h3和a代码应用CSS样式。

Answer 3

您不能在span元素中使用颜色来设置标记中的颜色。您需要在标签中设置颜色：

＆＃13;

＆＃13;

$('h3').each(function () {
    if($(this).contents().first().is('a')){
        $(this).contents().first().css('color','#fff');
    }else {
        var node = $(this).contents().filter(function(){
            return this.nodeType == 3;
        }).first();
        var text = node.text();
        var first = text.slice(0, text.indexOf(" "));
        node[0].nodeValue = text.slice(first.length);
        node.before('<span style="color:#fff">' + first + '</span>');
    }
});

＆＃13;

h3{
  background: #f00;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><a>test</a> word</h3>
<h3>test word</h3>

＆＃13;

＆＃13;

＆＃13;

取自here的第一个单词选择器的代码。