Ajax请求后的CSS选择器（注释系统）

Question

Problem:

After adding a comment on a webpage everything works property, I mean added comments but I want them to slide down the last added comment. I think it is problem with css selectors, comments should be over last comments on website. Which one selector do I have to type for it?

Anybody can help me with it? I hope all is clear.

 $(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> 

I don't know how fix that!

Answer 1

Add any of the following as the last statement in the success callback of ajax .

Use last()

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

OR

You can also use :last pseudo-selector:

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

Both of these will give you the last element having comments class