如何在JQuery中定位第二个元素

Question

This is my PHP code and each post has a More button with the same class. I want if I click on More button of post A, only the comments under it should be displayed :

 <?php 
  for ($i = 1; $i <= 10; $i++) {
    echo "<div class='col-md-6'>";   
    echo "<div class = 'feeds'>"; ?>
    <form method='post' class='murconform form-horizontal' name='signinform' 
     action =''>
         <?php
         echo "<p>". $post . "</p>";
         echo "<div class = 'murcons btn-group'>";
         echo "<span class = 'likecount'>". $likes . "</span><button class='mlike             pacedown' value='".$assigned_id."' name = 'like' type='submit'><span class = 'buttons'>Like</span><span class='glyphicon glyphicon-heart'></span></button>";

   //Problem 1: I want whenever the next button with the class 'mmore' is clicked, the class
   'comment_data' should be displayed. It is set to "display:none" by default but 
    whenver I click it, all other comment are displayed.

         echo "<button class='mmore pacedown' value='".$post_id."' name = 'more' type='submit'><span class = 'buttons'>More</span><span class='glyphicon glyphicon-chevron-down'></span></button>";
         echo " "."<span class = 'slanted'>". $time . "</div>"; 
     echo "</form>"; 
     // fetch and display comment for each post...
      $qry = "SELECT user_id, comment FROM comments WHERE post_id = ? ORDER BY time DESC";
      $q = $conn->prepare($qry) or die("ERROR: " . implode(":", $conn->errorInfo()));
      $q->bindParam(1, $post_id);
      $q->execute();
      if($commentz = $q->fetchAll()){
      echo "<div class = 'comment_data'>";
      foreach ($commentz as $comment){
      echo "<div class = 'per_comment'>";
         echo "<p>". $comment[0] ." ". $comment[1] . "</p>";
      echo "</div>";
       }
     echo "</div>";
         }?>
      <form method='post' class='murconform form-horizontal' name='signinform' action ='<?php echo htmlentities($_SERVER['PHP_SELF']);?>'>
       <?php
        echo "<div class = 'commentdiv'>";
      echo "<input type='hidden' name='post_id' value='".$post_id."'>";
      echo "<textarea autocomplete = 'off' name='commentdata' maxlength='480' class='commenttext form-control' rows = '1' placeholder='Have your say...'></textarea>";
      echo "<span class='counter_msg'></span>";
      echo "<button class='btn btn-xs btn-primary onespacedown comment' name = 'comment'       type='submit'>Comment</button>";
    // Problem 2: How do I get the content of this textarea whenever the submit button is clicked via AJAX? 

    echo "</form>";
    echo "</div>";
    echo "</div>";
    echo "</div>";
   }
   ?>

This is my jQuery code for Problem 1:

$( ".comment" ).click(function() {
  var $this=$(this);
  $(".murconform").submit(function(e){
           return false;
       });
     $('.comment_data').slideToggle("slow");

 });

And this is the AJAX code for Problem 2:

$(".mlike").click(function () {
    $(".murconform").submit(function(e){
        return false;
    });
    var $this=$(this);
    var post_id = $('.post_id').val();
    var comment = $(".commentdata").text();
    var request = $.ajax({
      url: "comments.php",
      type: "POST",
      data: { post : post_id , comment : comment },
      dataType: "html"
    });
    request.done(function( msg ) {    
        $this.prev('.comment').html( msg ); 
    });
});  

Any good solution/advice(with regards to best practice) would be deeply appreciated.

Answer 1

Hard to know for sure unless you post the generated HTML, not the code that generates it but it seems that what you are trying to do is target elements within a group, not those outside of that group that have the same class name.

To do this you find a common parent of those elements (for example a div that wraps those elements), in your case .feeds seems to occur once per iteration.

$('.mmore').on('click', function(){
    var $commonparent=$(this).closest('.feeds');

Then you find the elements you want within $commonparent

    var post_id = $commonparent.find('.post_id').val();
    var comment = $commonparent.find(".commentdata").text();

This might clear up both problems. For a better answer please post the generated HTML and move your problem explanations to outside of the code.

To clarify, div.feeds can be used as the closest ancestor allowing you to find child elements by class name that only exist within that particular div.feeds

<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>
<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>
<div class="feeds">
    <input class="post_id" />
    <textarea class="commentdata"></textarea>
    <button class="mmore">More</button>
</div>