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

Demo

Answer 3

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

追加时，最后移动前一个<li> </li>

3 个答案: