CODEWITHSUNDEEP
jquery
Jack Pilowsky
Jack Pilowsky

Reputation: 2303

How to select a text node on jquery without selecting the sibiling

I have some HTML that is structured like this:

<div class="ProductPriceRating">
    <em>
        <strike class="RetailPriceValue">$65.00</strike> 
        $45.00
    </em>
</div>

I need to select the "$45.00". I thought this would work:

$('.ProductPriceRating strike').siblings().css('background','red');

But it didn't

Upvotes: 0

Views: 53

Answers (2)

colestrode
colestrode

Reputation: 10668

You can't style text nodes directly, instead wrap it in a span and style that:

HTML

<div class="ProductPriceRating">
    <em>
        <strike class="RetailPriceValue">$65.00</strike> 
        <span>$45.00</span>
    </em>
</div>

jQuery

$('.ProductPriceRating strike').siblings().css('background','red');

Working Demo

If you can't change the HTML structure, you can try styling the em and the strike:

$('.ProductPriceRating em').css('background','red');
$('.ProductPriceRating strike').css('background','white');

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388416

You cannot apply a style to a text node, you need to wrap it with an element

Try

var node = $('.ProductPriceRating strike').get(0).nextSibling;
$(node).wrap('<span/>').parent().css('background','red');

Demo: Fiddle

Upvotes: 5

Related Questions