ajax 请求后的 css 选择器（评论系统）答案

【问题标题】：css selectors after ajax request (comments system)ajax 请求后的 css 选择器（评论系统）
【发布时间】：2015-09-11 19:33:27
【问题描述】：

问题：

在网页上添加评论后一切正常，我的意思是添加了 cmets，但我希望它们滑下最后添加的评论。我认为这是css选择器的问题，cmets应该超过网站上的最后一个cmets。我必须为它输入哪一个选择器？

有人可以帮我吗？我希望一切都清楚。

$(function() {
  "use strict";
  var commentsform = $('#commentsForm');
  var errorTemplate = '<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';
  var successTemplate = '<div class="alert alert-success"><span class="glyphicon glyphicon-warning-sign"></span>&nbsp;{error}</div>';
  var commentsTemplate = '<div class="row" id="comments"><div class="col-md-2 col-sm-2 hidden-xs"><figure class="thumbnail">{photo}<figcaption class="text-center">{username}</figcaption></figure></div><div class="col-md-10 col-sm-10"><div class="panel panel-default arrow left"><div class="panel-body"><header class="text-left"><div class="comment-user"><i class="fa fa-user"></i> {username}</div><time class="comment-date"datetime="{date}"><i class="fa fa-clock-o"></i> {date}</time></header><div class="comment-post">{comment}</div></div></div></div></div>';
  var messages = $('#messages');
  var comments = $(''); //witch one selector i have to select for it?

  commentsform.submit(function() {
    $.ajax({
      dataType: "json",
      url: '/users/ajax/add-comments/',
      type: 'POST',
      data: commentsform.serialize(),
      success: function(response) {
        if (response) {

          if (response.errors) {
            errorTemplate = errorTemplate.replace(/\{error\}/, response.msg);
            messages.show();
            messages.html(errorTemplate);
            setTimeout(function() {
              messages.slideUp(1500);
            }, 1000);
            return false;
          } else {
            $('#commentsForm')[0].reset();
            var comment = commentsTemplate;
            successTemplate = successTemplate.replace(/\{error\}/, response.msg);
            messages.show();
            messages.html(successTemplate);
            setTimeout(function() {
              messages.slideUp(1500);
            }, 1000);

            comment = comment.replace(/\{photo\}/, response.avatar);
            comment = comment.replace(/\{username\}/, response.username);
            comment = comment.replace(/\{comment\}/, response.comment);
            comment = comment.replace(/\{date\}/, response.date);
            comments.append(comment);
            comments.find('#comments ::after').slideDown();
          }

        }
      }
    });
    return false;
  });

});

<section class="comment-list">
  <div class="row comments">
    <div class="col-md-10 col-sm-10">
      <div class="panel panel-default arrow left">
        <div class="panel-body">
          <header class="text-left">
            <div class="comment-user">
              <i class="fa fa-user"></i>
            </div>
            <time class="comment-date" datetime="">
              <i class="fa fa-clock-o"></i> 
            </time>
          </header>
          <div class="comment-post"></div>

        </div>
      </div>
    </div>
  </div>
</section>

我不知道如何解决这个问题！

【问题讨论】：

标签： jquery html css ajax json

【解决方案1】：

在ajax 的success 回调中添加以下任一语句。

使用last()

$('.comments').last().slideDown();

或

你也可以使用:last伪选择器：

$('.comments:last').slideDown();

这两个都会给你最后一个具有comments类的元素

【讨论】：