Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts

    JQuery foreach div class

    Hello. I have a facebook like profile setup for users and I want to have a drop down comment section for people to be able to comment. To open the comment section I have a little "opencomments" button. How do I make JQuery open only the comment section for the specific post that the user wants to comment?

    The following is a simplified version of the HTML I'm running:

    Code:
    <div class='postcontainer'>
          <div class='commentsopenbutton'>Open</div>
    </div>
    <div class='commentdropbox'>
    </div>
    I have over 10 instances of the above code in a single page, and I would like it for when a user clicks the 'open' button, for it to only open the 'commentdropbox' for that specific post.

    The JQuery I use opens either all of the comment boxes on the page or when I use the "each()" statement, opens all the comment boxes x number of times.

    Code:
    $(document).ready(function () {
    	$(".postcontainer").each(function() {
    	  $(".commentsopen").click(function()  {
            $(".commentdropbox").slideToggle("fast");
           });
        });
    });
    Thank you in advance

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    You need to work with $(this) and DOM traversal:
    Code:
    $(".postcontainer").each(function() {
      $(this).children(".commentsopen").click(function()  {
        $(this).parent().next(".commentdropbox").slideToggle("fast");
      });
    });
    $(this), in this case, refers to the object that is currently addressed, i. e. the first one refers to .postcontainer, because it’s in the each() function attached to that object, and the second one refers to the specific .commentsopen object, because it’s in the click() function attached to that one. Then, from there you can use various traversal methods (next/prev/parent/children/closest/find etc.) to go up and down the DOM tree.

  • Users who have thanked VIPStephan for this post:

    cloudstryphe (06-09-2012)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you very much sir, it worked perfectly.

    One more question though. This isn't a biggy, but now when it works, the div that opens always opens 5-6 px larger then it's supposed to, then when the animation is finished, it re-sizes itself to the correct size. It's not affecting functionality but just aesthetics. Any ideas on how to make the animation smooth throughout?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    This is most likely because you added some padding to the element, which is not animated, or overridden during the animation. With things like slide-in/out only the element height/width value is animated, and during the animation the overflow of the element is set to “hidden”. This can interfere with paddings and margins. You should use another element that is not animated to apply the spacing.

  • Users who have thanked VIPStephan for this post:

    cloudstryphe (06-10-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •