CODEWITHSUNDEEP
jqueryjquery-selectors
user1005793
user1005793

Reputation: 2911

JQuery Find Next Element Inside Table Row

I have this function:

$("span.expandimg").click(function(){
  $(this).nextAll(".toggle_container:first").slideToggle("slow");
});

That worked fine with:

<span class="expandimg"><a href="#"><img id="iexpand" src="images/expand.png" border="0" /><img id="icollapse" src="images/collapse.png" border="0" /></a></span>&nbsp;<a href="asdfa" class="DSF">First Link</a>

<div class="toggle_container">
Some Text
</div>

But now I'm putting "expandimg" inside a table column and "toggle_container" inside another column. Something like this:

<tr>
  <td><span class="expandimg">......</td>
  <td><div class="toggle_container">.....</td>
<tr>

How can I find the "toggle_container" element now? I want to click on "expandimg" to expand the "toggle_container", but it's not working with the function I have.

Thanks!

Upvotes: 5

Views: 13583

Answers (3)

ipr101
ipr101

Reputation: 24236

With the HTML you currently have this should work -

$("span.expandimg").click(function(){
  $(this).parent().siblings().find(".toggle_container:first").slideToggle("slow");
});

Demo - http://jsfiddle.net/QAkKP/

Upvotes: 0

Shef
Shef

Reputation: 45589

$("span.expandimg").click(function(){
    $(this)
        .closest("tr")
        .find("td .toggle_container")
        .slideToggle("slow");
});

Upvotes: 10

Marco Johannesen
Marco Johannesen

Reputation: 13134

$("span.expandimg").click(function(){
  $(this).parents("tr").find(".toggle_container").slideToggle("slow");
});

Goes up to the parent TR element, searches that for the .toggle_container.

Should work :)

Upvotes: 0

Related Questions