追加时，将上一个最后移动到<li>末尾

Question

我有这个列表：

<li id="1">Text</li>
<li id="2">Text</li>
<li id="3">Text</li>
<li id="4">Text</li>
<li id="5">Text</li>
<li id="6" class="last">Text</li>

单击后，我在末尾添加了另一个<li>，增加了最后一个<li>的编号。

所以我的结局是这样的：

<li id="1">Text</li>
<li id="2">Text</li>
<li id="3">Text</li>
<li id="4">Text</li>
<li id="5">Text</li>
<li id="6" class="last">Text</li>
<li id="7">Text</li>

问题是，当我附加一个<li>时，它会在末尾移动。所以我的问题是，在我附加了<li>之后，如何将带有类.last的那个移动到末尾。我不能删除它并将其附加在后面，因为它的值是由用户设置的。

Answer 1

您可以使用insertBefore:而不是追加

http://api.jquery.com/insertBefore/

Answer 2

试试这个：

( function( $ ) {
    $( 'span' ).on( 'click', function( event ) {
        event.preventDefault();
        var $ul = $( 'ul' ),
            $last = $ul.find( '.last' ),
            lastID = $last.attr( 'id' );
        $last.attr( 'id', ( +lastID + 1) );
        $( '<li id="' + lastID + '">Text</li>' ).insertBefore( $last );
    });
})( jQuery );

演示

Answer 3

$('ul .last').removeClass('last');
$('ul').append('<li id="'+$('ul li').length+'" class="last">text</li>');