Когда добавляешь, передвигай предыдущий последний <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>');