CODEWITHSUNDEEP
javascripthtmlcss
user961437
user961437

Reputation:

javascript select parent element's child

For example I want to do something like this:

<td class="repeats">     
    <img src="a.png"/>
    <span onmouseover="this.parentNode.info.src='images/b.png'" 
          onmouseout ="this.parentNode.info.src='images/a.png'">
          text here
    </span>
</td>

Without using an ID or JQuery (ideally) I need a way of selecting the image in the current cell. How can this be achieved?

I only want to change the current cell, as opposed to all cells with the same class.

Upvotes: 1

Views: 2925

Answers (2)

techfoobar
techfoobar

Reputation: 66663

Use previousSibling:

<td class="repeats">     
    <img src="a.png"/>
    <span onmouseover="this.previousSibling.src='images/b.png'" 
          onmouseout ="this.previousSibling.src='images/a.png'">
          text here
    </span>
</td>

Docs: https://developer.mozilla.org/en-US/docs/DOM/Node.previousSibling

Or you can use parentNode.childNodes[0]:

<span onmouseover="this.parentNode.childNodes[0].src='images/b.png'" 
    onmouseout ="this.parentNode.childNodes[0].src='images/a.png'">
    text here
</span>

Upvotes: 3

Hiren Desai
Hiren Desai

Reputation: 1091

you can try this

$('td[class="repeats"]').children().filter('Img').dosomething();

Upvotes: -1

Related Questions