如何定位JQuery中的第二個元素

Question

這是我的PHP代碼，每個帖子都有一個更多按鈕具有相同的類。我想，如果我點擊後A的更按鈕，應該只顯示其下的評論：

<?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>"; 
    } 
    ?> 

這是問題1我的jQuery代碼：

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

}); 

這是問題2的AJAX代碼：

$(".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); 
    }); 
}); 

任何好的解決方案/建議（關於最佳實踐）將深表感謝。

Answer 1

很難確切知道，除非您發佈生成的HTML，而不是生成它的代碼，但看起來您要做的是將組中的元素作爲目標，而不是那些具有相同類別的組之外的元素名稱。

爲此，您可以找到這些元素的共同父項（例如包裝這些元素的div），在您的情況下，.feeds似乎每次迭代都會發生一次。

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

然後你找到你想要$ commonparent

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

內這可能會消除這兩個問題的元素。爲了獲得更好的答案，請發佈生成的HTML並將問題解釋移到代碼之外。

爲了澄清，div.feeds可以作爲最接近的祖先讓你找到類名的子元素，只有存在特定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>