0

基本的に、私は少しTo Doリストアプリを作成しています。ボタンをクリックすると新しいリストアイテムをコンテナに追加すると、リスト効果が作成されます。

私がしたいのは、クラスをリストの最後の要素に追加することです.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('');

});

これを達成する方法を知っている人はいますか？そんなに難しいことではないと思うのですが、今は正直考えられないようです..

4

2 に答える 2

3 
...
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>');
...
于 2013-02-01T21:50:24.027 に答える
1 
$('.last').removeClass('last')
$('#new_item').addClass('last');

これにより、「last」クラスを持たないことが保証され、新しい li に .last が適用されます。

$(this)代わりに私もお勧めします$('#new_item')

于 2013-02-01T21:52:32.797 に答える