Question

问候，

我正在尝试使用jQuery在一串父帖子中为评论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（表单textarea）的值附加到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祖先
找到嵌套commentsBlock

find()^(docs)

附加评论的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;
});

jQuery Selection＆amp;过滤问题

4 个答案: