Question

How can I select the parent next element in jquery

<div class="test">
 <table>
  <tr><td><div><a href="#" class="first">First</a></div></td></tr>
  <tr><td><div><a href="#" class="second">Second</a></div></td></tr>
 </table>
 <table>
  <tr><td class"toHide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
 </table>
</div>

I have to hide toHide td when I click on the first anchor tag. How do I do that ? I have prepared a jquery code but it fails !

$(document).ready(function(){
  $(".first").click(function(){
    $(this).closest('.test').find('.toHide').hide();
  });
});

This is done thanks

http://jsfiddle.net/aaEFQ/60/

Was it helpful?

Solution

You had error in class attributes definitions- missing and additional = like class=="test" and class"toHide"

<div class="test">
    <table>
        <tr>
            <td>
                <div><a href="#" class="first">First</a>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div><a href="#" class="second">Second</a>
                </div>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td class="toHide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        </tr>
    </table>
</div>

Demo: Fiddle

OTHER TIPS

Working fiddle

Typo you have == in your html

<div class=="test">
           ^

change it to

<div class="test">
          ^

and in <td class="toHide"> missing =

              ^

try something like this

  jQuery('#test .toHide').hide();

try

$(document).ready(function(){
  $(".first").click(function(){
    $(this).closest(".test").find('.toHide').eq(0).hide();
  });
});
$(document).ready(function(){
  (".first").click(function(){
 $(this).closest('.test').find('.toHide').hide();
   });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top