Traversing HTML using Jquery

Question

My sample HTML

<tr>
    <td>
        <div><span id="temp" />
        </div>
    </td>
</tr>
<tr>
    <td>
        <div><span id="temp" />
        </div>
    </td>
</tr>

From the Span tag how do i get the Table tr tag and set its background color ? Any easy methods rather than finding parent.parent?

And only the particular span tag TR should be changed not all the table TR ?

Thanks

@Chen Excellent and quick . Modified my question. i need only one TR to change not all the TR. is there a easy way out — user2067567
– user2067567, Commented Jun 25, 2013 at 14:56
Use .closest() instead of .parents(), will return only the closest tr. — casraf
– casraf, Commented Jun 25, 2013 at 14:59

Adil Shaikh · Accepted Answer · 2013-06-25 14:52:48Z

11

you can use .closest()

$('#temp').closest('tr').css('background-color', 'green');

http://api.jquery.com/closest/

answered Jun 25, 2013 at 14:52

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Orbling Over a year ago

+1 as .parents() causes problems in nested tables, as it matches all <tr> parents and will return multiple. Whereas .closest() returns the closest ancestor that matches.

user2067567 Over a year ago

@pXL how do i make it affect only tat TR and not all TR

Clyde Lobo Over a year ago

+1. I just read the docs for .closest() and .parents() and this seems to be faster

Adil Shaikh Over a year ago

@user2067567, see this demo, when you click on tr, only that tr will change its bg color -----> jsfiddle.net/8NmSA

Piotr Uchman · Accepted Answer · 2013-06-25 14:53:04Z

1

in jQuery:

$("#temp").parents("tr").css('background-color', 'green');

answered Jun 25, 2013 at 14:53

Piotr Uchman

5703 silver badges14 bronze badges

Comments

YD1m · Accepted Answer · 2013-06-25 15:05:18Z

1

Try .parents()

$('#temp').parents('tr').first().css({'background-color': '#fff'});

.first() exclude elements in cause of nested tables.

Or .closest()

$('#temp').closest('tr').css({'background-color': '#fff'});

edited Jun 25, 2013 at 15:05

answered Jun 25, 2013 at 14:52

YD1m

5,9152 gold badges22 silver badges25 bronze badges

Collectives™ on Stack Overflow

Traversing HTML using Jquery

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related