I have some <TD>s without unique names. Inside them there are spans with unique classnames so I have no problem targetting the spans. How can I target the parent <td> so I can change its class?

I want to do something like $(".classname").parent("TD").className="newClassclassname".

I have some <TD>s without unique names. Inside them there are spans with unique classnames so I have no problem targetting the spans. How can I target the parent <td> so I can change its class?

I want to do something like $(".classname").parent("TD").className="newClassclassname".

• javascript
• jquery

Share Improve this question Follow edited Apr 19, 2011 at 14:42 David Tang 93.7k3232 gold badges168168 silver badges149149 bronze badges asked Apr 19, 2011 at 14:30 124697124697 21.9k6969 gold badges197197 silver badges319319 bronze badges 1

• 1 You can use .find('.newClass'); – Khez Commented Apr 19, 2011 at 14:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You were close:

 $('.classname').parent('td').addClass('newClassName');

Though typically it's safer to go with:

 $('.classname').closest('td').addClass('newClassName');

... which doesn't assume the <td> is the immediate parent.

---

The reason .className doesn't work is because jQuery returns elements wrapped in the jQuery object. If you want to access the original (DOM) object you need to select the first item in the jQuery collection with [0]:

 $('.classname').parent('td')[0].className = 'newClassName';

But I remend using the jQuery function addClass() anyway since it won't interfere with existing classes.

You can do

$("span.classname").closest("td").addClass("newClassclassname");

Sorry, do you mean following code:

$(".classname").parent("TD").addClass("newClassName");

$(".classname").parent("TD")[0].className="newClassname";

$(".classname").parent().addClass("newClassclassname");