jquery - $(this).parents ("p").append ("hello");与预期元素不匹配

Question

这是一个评论/回复系统。以下代码显示主要评论和评论回复。 jQuery 代码应该选择 (paragraph id="test") 元素，并在单击回复按钮时将消息附加为回复消息。

jQuery $(this).parents("p").append("hello"); 不起作用。我尝试过使用 closest("p") 和 find("p") 但它仍然不起作用。有任何想法吗？

<div class='box'>
    <?php 
        // Comments from database code goes here
    ?>
</div>

<div class="feedback">
    <?php
        while ($row = mysqli_fetch_array($query)) {
            echo "".$row['Username'].":&nbsp";echo $row['replyormsg'];
        }
    ?> 
    <p id="test"><p>                                       
</div>

<div class="replymsg">
    <!-- Reply Form/Textbox -->
    <form class=".replyform">   
        <textarea class="replytext" ></textarea>
        <button class="replybutton" data-value="<?php echo $commentid; ?>">Submit</button>
    </form>
</div>

$(document).ready(function(){
    $(".replybutton").click(function(e){
        e.preventDefault();
        var id = $(this).data("value");
        var replytext = $(this).prev().val();
        $(this).parents("p").append("hello"); 
        $("textarea").val(""); 
    });
});

Answer 1

.replyButton 元素没有父 p 元素，因此 parents('p') 选择器不返回任何内容。假设您正在 .feedback 中查找 p 元素，您应该使用以下内容:

$('.feedback p').append("hello"); 

假设您使用 DOM 遍历，因为该 HTML block 是重复的，您首先应该从 p 中删除 id="test" (因为它将是重复，因此无效)。然后，您可以使用以下命令从单击的 .replyButton 遍历到最近的 .feedback p:

$(this).closest('.replymsg').prev('.feedback').find('p').text('hello');