Jquery parents() help

Question

Can someone please tell me why this doesn't work? I'm trying to show and hide content.

Here is my markup

<div class="entry">
  <p class="posted">
    test<br />
    <a href="#" class="toggle" title="Show Comments">
      Show/Hide
    </a>
  </p>
  <div class="box" class="comment">
    test hidden comment
  </div>
</div>

---

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').next('div.box').toggle(400);
  });
});

The way this example sits right now, If I take the last closing div and move it up after the closing p tag, it works fine but shows and hides all hidden content (divs) which is not what I'm after. I'd only like to show the content that is associated with each link.

Answer 1

try use .parent instead of .parents.

this will work:

    $(function() {
        $('div.box').hide();
        $('a.toggle').click(function() {
        $(this).parent('.posted').next('div.box').toggle(400);
        });
    });

Answer 2

class="comment" overrides class="box", use class="comment box"

Answer 3

It's not the parents that's the problem, it's the next(). next() fetches sibling elements, whereas you need the nested sub-elements. Use children() instead. Try this, it worked for me:

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').children('div.box').toggle(400);
  });
});

Answer 4

It works if you change next() to find() or children():

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).parents('.entry').find('div.box').toggle(400);
  });
});

This is because next() gets the siblings of the object, while find() searches the descendants. When your code calls next() the object is '.entry' which has no siblings, you can use children() as zombat suggests or find() as I have done to locate div.box as it is a descendant of '.entry'.

Answer 5

Hi Parkim, are you referring to the issue I am having with the page jumping up to the top? I tried this but it still does the same thing. – Jack

nope, because of override, you can't use ".box" selector. you page jumps to the top, because of "#" anchor, you should use "return false" to prevent default "click" handler.

$( "a" ).click( function() { /* your code */ return false; } );

Answer 6

Just as an alternative, I'd use closest and find instead of parent and children respectively, I think it's more a matter of preference though.

$(function () {
  $('div.box').hide();
  $('a.toggle').click(function () {
    $(this).closest('.entry').find('div.box').toggle(400);
    return false;
  });
});