Question

基本上我正在创建一个小待办事项列表应用程序，在我按钮点击时将新列表项添加到容器中，这会创建列表效果。

我想要做的是在列表的最后一个元素中添加一个类，使用last：child适用于此但我需要它做的是在添加新元素时更新最后一个元素，所以假设我有列表中的5个项目，所以第5个项目的最后一个类，当我添加一个新项目时，我想从旧的最后一个项目中删除该类并将其添加到新的最后一个项目（这有意义吗？）

这是我到目前为止的代码..

<div id="list_container">
    <div id="to_do">
        <ul id="tasks" style="padding:0;">      
        </ul>
    </div>
</div>

var items = [];

// Add new item
$('#add_btn').click(function(event){
    event.preventDefault();

    var list_item = $('#new_item').val();

    // Validation
    if(list_item == ""){
        $('#new_item').addClass('empty');
    }else{ 
        $('#new_item').removeClass('empty').addClass('normal');
        items.push(list_item);
        var lastEl = items[items.length-1];
        $('ul#tasks').append('<li><input type="text" class="to_do_item" value="' + lastEl + '"/></input></li>');
    }

    // Clear input field after adding
    $('#new_item').not(':button, :submit, :reset, :hidden').val('');

});

任何人都知道如何实现这一目标？我认为这不会那么困难，但我现在似乎无法直接思考..

Answer 1

...
var lastEl = items[items.length-1];
$('ul#tasks li').removeClass('last');
$('ul#tasks').append('<li class="last"><input type="text" class="to_do_item" value="' + lastEl + '"/></input></li>');
...

Answer 2

$('.last').removeClass('last')
$('#new_item').addClass('last');

这个guarentees没有类'last'，然后适用.last到新的li

我甚至会推荐$(this)而不是$('#new_item')

在单击JQuery上将类添加到最后一个元素

2 个答案: