Question

Using jQuery, I have selected an <a> inside a div and want to use $(this) to select the next div (I guess this makes it an uncle?).

I want to use the same class name for all my content so I want to use only relative to $(this).

Here’s an example of the behavior I am after:

<div><a>click</a></div>
<div> SELECT THIS DIV after click a </div>  (real code below)

I have been playing around and it works fine if I don’t close the div around the <a>. .next('div") finds the div after the </a>, but I need to close the div of the <a>. (So I guess this makes the <a> a child of the div I am in.)

So I need to access the uncle div of the one I’m in? How would I do that –

Here’s what I have been playing with so far:

js:

 $(document).ready(function() {
  $('.demo > .row').hide();  
  $('.demo > .box > a').click(function() {
    $(this).next().slideToggle('fast')
    .siblings('div:visible').slideUp('fast');
  });
});

html:

<div class="demo">
    <div class="box"><a>Title 1</a></div>
    <div class="row">
        <ul >
            <li> <a >  <img >  </a></li>
        </ul>
    </div>
</div>

Answer 1

Have a look at the traversal functions provided by jQuery. In this case, you need parent followed by next:

$(this).parent().next().slideToggle...