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

이 문제 하나 내 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을 생성하는 코드가 아닌 생성 된 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는 만 생성 된 HTML을 게시 특정 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>