Nối phần tử không kết thúc, trước phần tử cuối cùng trong jQuery

Question

Tôi đang cố đăng nhận xét bằng bài đăng AJAX. Nhưng phần tử comment mới nhất chứa nút gửi. Và sau khi thêm, mục mới sẽ xuất hiện sau khi gửi nút.

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

và kết quả của việc đăng yêu cầu:

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

tôi muốn giữ nút gửi vào cuối luôn. Tôi có thể làm cái này như thế nào?

Answer 1

Hãy thử điều này

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

Hoặc thậm chí tốt hơn

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

Cái này là tốt hơn cho hiệu suất

Demo

jQuery last-child

jQuery insertBefore

Answer 2

Hãy thử điều này:

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

Answer 3

Bạn có thể sử dụng: cuối cùng pseudo-selector:
thử điều này:

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