Question

I have a <td> that looks something like this:

<td class="myTDClass">
    <span class="spanClass">Header</span>
    <br />
    <img class='myImages' style='cursor: hand;' onclick='doSomething(control)' alt='this is my alt Text'></img>
    <br />
    <span style="color: #123456;">More Text</span>
    <br />
    <a class='findThisClass'>Insert Alt Text Here</a>
</td>

This calls some jQuery code that sets the alt tag to some new text. Then, i want it to set the <a> element to some new text. Here is the jQuery code:

doSomething = function(control)
  {
    var $myControl = $(control);
    $myControl.attr("alt", "This is the new Alt Text!");

    var $newControl = $(control).parent().siblings().find(".findThisClass").first();
    alert($newControl.find("a").text());
  });

The jQuery code sets the alt tag great, but doesn’t find the <a class=findThisClass />.

I think I’m using the .parent() and .siblings() wrong. Can anyone find my error? The idea here is that I can search just inside the <td> for the <a> element, and not touch the other elements in other <td>s

Answer 1

Try this instead:

var $newControl = $(control).closest('.myTDClass').find(".findThisClass");
alert($newControl.text());

Also img is self closing tag, instead of:

<img></img>

Just use:

<img... />

And instead of:

onclick='doSomething(control)'

Use:

onclick='doSomething(this)'

so that jQuery has really a control to work with 🙂

Working Example