CODEWITHSUNDEEP
javascriptjqueryhtml
Nicole C. Baratta
Nicole C. Baratta

Reputation: 97

Style a string within a paragraph with an ID

I have this HTML:

<p>
   (rcvd)                           
<a href="linkhere">Title</a>
   by Person,                          
<br></br>
   - More text            
</p>

And I want to change the color of (rcvd) to green. I tried the following:

  1. This changes the entire line to green but keeps the link

    $("p:contains('(rcvd)')").attr("style","color:green");

  2. This changes the rcvd part to green but removes the Title link

    $("p").each(function() {
    var text = $(this).text();
    text = text.replace("(rcvd)", "<span style='color:green;'>(rcvd)</span>");
    $(this).html(text);
});

  3. This does nothing, but I think it's the solution I want with a small tweak somewhere that I'm missing

    $(p).html($(p).html().replace("(rcvd)","<span style='color:green;'>(rcvd)</span>"));

Any pointers welcome (I am still new to JQuery and trying to learn so I'd love an explanation as to why you make the suggestion you make.

Upvotes: 0

Views: 97

Answers (4)

David Thomas
David Thomas

Reputation: 253308

My own suggestion would be:

$('p').html(function(i,h){
    return h.replace('(rcvd)', '<span class="greenColoured">(rcvd)</span>');
});

Using CSS to supply the style:

.greenColoured {
    color: green;
}

JS Fiddle demo.

As noted by TrueBlueAussie (in comments, below), I've not explained the parameters in the anonymous function passed to the html() method: the function(i, h):

The html() method essentially iterates over the collection returned by the selector (in this case over all the paragraphs selected); without use of the anonymous function each p element would have the same HTML set. Using the function, with the i and v (which can be named however you please allows you to access the index (i) of the currently iterated-over element amongst the collection, and v (the second parameter) returns the current 'value' (in this case the existing innerHTML of the current node being iterated over).

As noted, these parameters can be called anything you like, for me i and h are habitual (i for 'index' and h for HTML in this case); so long as you remember that (as with many other anonymous functions passed to jQuery methods) the first is the index and the second the 'current-value'.

References:

Upvotes: 4

suff trek
suff trek

Reputation: 39767

This will select the first node within the P (which happens to be a text node) and style it:

$("p").contents().first().wrap("<span style='color:green'></span>");

Demo: http://jsfiddle.net/jrAWn/

UPDATED. Ok, and this is using class:

.rStyle {
   color:green;     
}

$("p").contents().first().wrap("<span/>").parent().addClass("rStyle");

Upvotes: 3

Matt Zeunert
Matt Zeunert

Reputation: 16561

Try wrapping the tag names in quotes (jsFiddle):

$("p").html($("p").html().replace("(rcvd)","<span style='color:green;'>(rcvd)</span>"));

At the moment you are passing the variable p to the jQuery function. Presumable p is undefined, so you either get a Javascript error or just an empty jQuery object.

As others have said, the standard way to do this is wrapping the rvcd in a span:

<p>
   <span class="style-this">(rcvd)</span>                           
<a href="linkhere">Title</a>
   by Person,                          
<br></br>
   - More text            
</p>

And

$(".style-this").css("color", "green");

Upvotes: 0

Bucket
Bucket

Reputation: 7521

Use css() and give your <p> tag a class:

<p id="myGreenClass">(rcvd)</p>

And this jQuery code:

$('.myGreenClass').css('color', 'green');

Upvotes: 0

Related Questions