jQuery Traversing Problem

Question

I am running into a problem that just doesn't seem right. I've got a pair of anchor tags on the same level in the DOM. Structure below:

div.mcoup
    div.lcoup
    div.rcoup
     div.rcoupmeta
      a.rcoupedit
      a.rcoupdelete
    div.updcoup
    div.delcoup

And here is the script I'm using:

    $('div.delcoup').hide();
 $('a.rcoupdel').click(function() {
  $(this).parent().parent().next('div.delcoup').slideToggle(400);
  $('div.updcoup').slideUp(400);
  $('div.crecoup').slideUp(400);
  return false;
 });

 $('div.updcoup').hide();
 $('a.rcoupedit').click(function() {
  $(this).parent().parent().next('div.updcoup').slideToggle(400);
  $('div.delcoup').slideUp(400);
  $('div.crecoup').slideUp(400);
  return false;
 });

The strange thing here is the a.rcoupedit properly targets and affects div.updcoup while, with the same code, a.rcoupdelete doesn't seem to do anything to div.delcoup. It does slideUp the other elements though. My thinking was, from a.rcoupdelete we have to move up two levels then find the next div with class of delcoup. Obviously something is wrong.

How do I target that div.delcoup properly?

Answer 1

.next() specifically selects the very next item in the DOM (at the same level). The .updcoup version works correctly because, indeed, after finding the parent of the parent of the anchor (i.e., div.rcoup) the .next() element is div.updcoup.

To look through all the elements that come after the selected one, use .nextAll():

$(this).parent().parent().nextAll('div.delcoup').slideToggle(400);