Targeting a specific class with jQuery

Question

I am trying to display a hidden class in jQuery but it is no applying to the class I am targeting. It displays the whole class:

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>
</div>

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>

<div class="feeds">
  <input class="post_id" />
  <textarea class="commentdata"></textarea>
  <button class="mmore">More</button>
  <p class="time">time</p>
  <div class = "comment_data">
    <div class = "comment">
      <p> Comments </p>
    </div>
  </div>
</div>

The class comment_data is display: none by default and should only be displayed whenever the More button is clicked. Working but it is displaying all the comments for 3 div.

This is my jQuery code:

$( ".mmore" ).click(function() {
   $('.comment_data').slideToggle("slow");
});

SamP · Accepted Answer · 2013-12-17 18:00:12Z

6

$('.mmore').click(function() {
   $(this).parents('.feeds').find('.comment_data').slideToggle('slow')
});

answered Dec 17, 2013 at 18:00

SamP

844 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

This is more convenient because it less depends on html structure.

Yax Over a year ago

This did the trick. You've just sealed my day productively. Thanks a whole lot.

Satpal · Accepted Answer · 2013-12-17 18:04:04Z

1

You can use .closest() to find .feeds div and then use .find() for *.comment_data* div

$('.mmore').click(function() {
   $(this).closest('.feeds').find('.comment_data').slideToggle('slow')
});

answered Dec 17, 2013 at 18:04

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Tom Pietrosanti · Accepted Answer · 2013-12-17 18:01:43Z

0

You're selecting all objects matching the selector .comment_data.

You'll need to limit it to the same container that the clicked button is in. There's a number of ways you could do this. One easy one would be:

$( ".mmore" ).click(function() {
   $(this).parent().find('.comment_data').slideToggle("slow");
});

answered Dec 17, 2013 at 18:01

Tom Pietrosanti

4,3042 gold badges27 silver badges30 bronze badges

Collectives™ on Stack Overflow

Targeting a specific class with jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related