CODEWITHSUNDEEP
javascriptjqueryhtml
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

How to select font with its style attribute value

I have the following html mark up.

<p> lorem ipsum lorem ipsum 
<font style="background-color:yellow"> ipsum </font> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id enim in tellus sollicitudin viverra. Morbi nec ipsum ligula, non volutpat enim. In quis metus <font style="color:red"> Tincidunt lorem </font>blandit faucibus. Nam condimentum facilisis vestibulum. Nunc tristique est vel erat sagittis ac placerat orci varius.</p>

I want to select only the font which has the "background-color:yellow" not any other <font> tag with any style

Upvotes: 0

Views: 106

Answers (2)

Wasim Shaikh
Wasim Shaikh

Reputation: 7030

I tried that , but somehow addClass was not working. so come up with this solution.

$('font').filter(function(){ 
            var bg=$(this).css("background-color"); 
            alert('bghlight - ' + bg);
       if ( bg == "rgb(255, 255, 0)" || bg == "yellow" )
       {
        $(this).addClass('hlight');
        $('font.hlight').each(function(){
        $(this).replaceWith($('<abbr>' + this.innerHTML + '</abbr>').addClass('abbr-hlight'));  
        });
       }
    });

Upvotes: 1

mck89
mck89

Reputation: 19231

You can simply use a filter function:

$("font").filter(function(){
    var bg=$(this).css("background-color");
    return bg=="yellow" || bg=="rgb(255,255,0)";
});

UPDATE

To add the class call the addClass function:

$("font").filter(function(){
    var bg=$(this).css("background-color");
    return bg=="yellow" || bg=="rgb(255,255,0)";
}).addClass("hlight");

Upvotes: 3

Related Questions