How to change anchor <a> style when it's in table cell using jquery

Question

I have following problem need to change style of which is in table cell using jQuery. The change is dependable on value in other cell. I have following table:

                             <table id="table">
                                <tr>
                                    <td>
                                        <a href="www.google.pl">YYYYYYYYY</a></td>
                                    <td>HHHHHHH<td>
                                </tr>
                                <tr>
                                    <td>Jedi Armor1</td>
                                    <td>HHHHHHH</td>
                                </tr>
                                <tr>
                                    <td>Jedi Armor2</td>
                                    <td>HHHHHHH</td>
                                </tr>
                            </table>

jQuery method:

            $(document).ready(function() {

                $('#table tr td').each(function(){
                     var textValue = $(this).text();
                        if(textValue == 'HHHHHHH'){
                        // add css class or any manipulation to your dom.
                    $(this).parent().css('color','red');
                    $(this).parent().children('td a').css('color','red');
                    };
                });

            // koniec funkcji hover
        });

The problem is how to change style??

Answer 1

Your code will work if you change children to find .

See this fiddle for a demo

Answer 2

children() can't look 2 levels down

Change:

$(this).parent().children('td a')

to

$(this).parent().find('a');

But simplest would be to just add a class to the row and use css to adjust the style for the whole row. It's generally easier to switch classes than undo inline css

$(this).parent().addClass('has_H');

CSS

tr.has_H, tr.has_H a{
    color:red;
}