Jquery headache - live traversing

Question

Hi guys,

I am trying to accomplish to show a div that is in the same list element as the button that executes a javascript statement. The whole list is loaded by Ajax, so therefore is the live function used.

However, i am quite stuck right now and have no idea of how to proceed. I have tried EQ, next, parent, children in several different ways to succeed, but it have only given me even more headache.

$('a[rel*=button]')
    .live('click', function(event) { 
       event.preventDefault(); 
       url = this.href;
     $(this).next().find(".theclassofthediviwannashow").show();
      return false;
});

The HTML:

<div class="mydiv">
   <ul>
      <li class="mylist">
         <a href="#" rel="button">Linktext</a>
         <div class="theclassofthediviwannashow">Bla bla bla</div>
      </li>
  </ul>
</div>

Hope that there is anyone who have an idea of what I am doing wrong. Thanks!

Answer 1

I'm not sure if I'm misunderstanding your question, but just removing .find(".theclassofthediviwannashow") and leaving just $(this).next().show(); seems to do what you want.

Answer 2

If your div always follows the link element, you should just be able to do:

$(this).next().show()

Answer 3

If the div you want to show is always next use next() but you say you have tried that. What you might be looking for is nextAll():

$('a[rel*=button]')
  .live('click', function(event) { 
      event.preventDefault(); 
      url = this.href;
      $(this).nextAll(".theclassofthediviwannashow").show();
  });

Answer 4

This should work:

$('a[rel*=button]')
    .live('click', function(event) { 
       event.preventDefault(); 
       url = this.href;
     $(this).next(".theclassofthediviwannashow").show();
      return false;
});