在jQuery中的最后一个元素之前附加元素不结束

Posted 2023-02-22

【中文标题】在jQuery中的最后一个元素之前附加元素不结束

【英文标题】：Append element not to end, before last element in jQuery

【发布时间】：2013-07-12 14:16:58

【问题描述】：

我正在尝试使用 AJAX 帖子发表评论。但最后一个comment 元素包含提交按钮。追加后，提交按钮后出现新项目。

<div class="commentContainer" >

    <div class="comment">
        <div class="commentText">Any comment1 ... </div>
    </div>

    <div class="comment">
        <div class="commentText">Any comment2 ... </div>
    </div>
        ....................................
    <div class="comment"> 
        <div class="sendPanel">
            <input type="submit" value="Post" />
        </div>
    </div>

</div>

和发布请求的结果：

success: function (result)  
    if (result.success) 
         $('.commentContainer').append('<div class="comment"><div class="commentText">' + result.text + '</div></div>');
       
 

我想始终将提交按钮保留在末尾。我该怎么做？

【问题讨论】：

感谢大家的帮助。

【参考方案1】：

试试这个

  $('<div class="comment"><div class="commentText">' + result.text + '</div></div>')
   .insertBefore('commentContainer .comment:last-child'); 

甚至更好

$('<div>', 'class': 'comment').append(
    $('<div>', 'class': 'commentText', text: result.text)
).insertBefore('.commentContainer .comment:last-child');

这个性能更好

Demo

jQuery last-child

jQuery insertBefore

【参考方案2】：

您可以使用 :last 伪选择器： 尝试这个：

success: function (result) 
    
        if (result.success) 
        
            $('.commentContainer').find('div:last').before('<div class="comment"><div class="commentText">' + result.text + '</div></div>');
           
    

【参考方案3】：

试试这个：

 success: function (result) 
    
        if (result.success) 
        
             $('<div class="comment"><div class="commentText">' + result.text + '</div></div>').insertBefore('.commentContainer .comment:last');