JQuery Выбор и проблема фильтрации

Question

Greetings,

Я пытаюсь добавить новый комментарий к UL Комментариев в строке родительских сообщений, используя jQuery.Кажется, я не могу понять, как добавить к комментариям родительского поста 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 с помощью следующего сценария, проблема добавляет его к предыдущему комментариюBL 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's .text() автоматически экранирует любой HTML в комментарии.

Answer 2

Я думаю, что вы должны сделать что-то вроде этого:

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

Обратите внимание на использование класса для проблем с производительностью, лучше использовать id для идентификации уникального блока, в качестве содержащего комментарии, чтобы вы могли сделать.appendTo ( '# commentsBlock').

Answer 3

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

• метод closest() ^{(документы)} для получения ближайшего statusUpdate-middle предка
• find() ^{(документы)} метод поиска вложенного commentsBlock
• метод append() ^{(документы)} для добавления комментария.

Answer 4

попробуй:

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