Jquery: first word color span issue for link

Question

I have a problem with first word when is as link, word appears not normal.

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

problem behaviour

And when not appear the link in the h3 tag looks good

nice behaviour

`.html()` returns what is within the HTML you selected. So it will also display your tags if there are any and all of your text. Tip: if you provide HTML people are more likely to help you and understand the problem better. — Michelangelo, Jan 18 '15 at 11:18
I'm not quite sure what are you trying to achieve. Do you want to style everything inside h3 besides links? Maybe you should use CSS for that :) — Anton Melnikov, Jan 18 '15 at 11:21
It would help if you showed some sample html, but are you saying you want some jquery code that styles whatever the first word is in all h3 elements, regardless of whether or not the first word happens to be contained in a child element such as an anchor? (Where your current attempt is going wrong because it works by finding the first space, which works out to be inside the attributes of the `` tag.) — nnnnnn, Jan 18 '15 at 11:29

score 0 · Answer 1 · answered Jan 18 '15 at 11:26

Try something like this instead: 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");
 });

score 0 · Answer 2 · answered Jan 18 '15 at 11:31

Try to search for opening a tags, not for spaces.

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

And seriously, it would be better just to apply CSS styles for h3 and a tags.

score 0 · Accepted Answer · edited May 23 '17 at 12:27

You cannot use color in span element to set color in a tag. You need to set the color in a tag itself:

$('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>

Code for first word selector taken from here.

Jquery: first word color span issue for link

3 Answers3