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

严重的是，最好仅将CSS样式应用于h3和a标记。

Answer 3

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

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

 h3{ background: #f00; } 

 <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> 

从此处获取的第一个单词选择器的代码。