jQuery 选择和过滤问题

Question

您好，

我正在尝试使用 jQuery 在父帖子字符串中的 Comments UL 中添加新评论。我似乎无法弄清楚如何附加到父帖子的评论 UL，这里是 HTML -

<div class="statusUpdate-DIV">
        <div class="statusUpdate-middle">
            <span class="statusUpdate-timestamp"><?php echo date("M d, y g:i a", strtotime($row['timestamp']));?></span>
            <span class="statusUpdate-title"><?php echo $row['title'];?></span>
            <?php echo $row['body'];?>
            <div class="commentsDIV" id="status<?php echo $row['id'];?>">
                <ul class="commentsBlock">
                    <li><strong>This is a comment</strong> comment here</li>
                </ul>
            </div>
            <div class="postCommentDIV">
                <span class="commentHeader">Comment</span>
                <form name="commentForm" class="postCommentFORM" method="post" action="">
                    <textarea rows="3" cols="63" class="commentBody" name="commentBody"></textarea>
                    <input type="submit" value="Post"/>
                </form>
            </div>
        </div>
    </div>

我试图将 commentBody （表单文本区域）的值附加到 commentsBlock （UL）。我能够使用以下脚本检索 commentBody 的值，问题是将其附加到之前的 commentsBlock UL：

    //This is just a test to make sure the value of .commentBody is being retrieved
$(".postCommentDIV form").submit(function() {
                    var comment = $(this).find(".commentBody").val();
                    alert(comment);
                    return false;
            });

谢谢。

Answer 1

您所需要做的就是在当前警报所在的位置添加此内容：

// Create the <li> containing the comment
var commentLi = $("<li>").text(comment);
// Travel up DOM tree to the closest statusUpdate-DIV, then back down to append
$(this).closest("statusUpdate-DIV").find(".commentsBlock").append(commentLi);

jQuery 的 .text() 将自动转义注释中的任何 HTML。

Answer 2

$(this).closest('.statusUpdate-middle').find('.commentsBlock').append(comment);

• closest()^(docs) 方法来获取最近的 statusUpdate-middle 祖先
• find()^(docs) 方法查找嵌套的 commentsBlock
• append()^(docs) 追加方法评论。

Answer 3

我认为你应该这样做：

    $(".postCommentDIV form").submit(function() {
              var comment = $(this).find(".commentBody").val();
              $('<li>').text(comment).appendTo('.commentsDIV .commentsBlock');
              return false;
    });

注意使用类来解决性能问题，最好使用 id 来标识唯一的块，因为包含注释，所以你可以执行 .appendTo('#commentsBlock') 。

Answer 4

尝试：

$(".postCommentDIV form").submit(function() {
var comment = $(this).find(".commentBody").val();
$(this).find(".commentsBlock").append("<ul><strong>" + comment + "</strong></ul>");
return false;
});