3

テーブルリスト項目の配列がある場合:

<div id="target">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
    </ul>
</div>

「li」を追加し、各アイテムの内部 html をインクリメントするクリック関数を構築したい場合は、次のように記述できます。

var listItems = $('#target ul li');
var newItem = document.createElement('li');
newItem.innerHTML = "list item " + (parseInt(listItems.size()) + 1);

$("#target").click(function() {
    var list = $('#target ul');
    list.append(newItem);
});

これは機能しますが、一度だけです。クリックするたびにリスト項目が追加されないのはなぜですか?

4

5 に答える 5

1

簡単な修正...イベントリスナー内に要素を作成する必要があります：

var list = $('#target ul');

$("#target").click(function() {
    var newItem = document.createElement('li');
    newItem.innerHTML = "list item " + (list.find("li").length + 1);
    list.append(newItem);
});

注:を に置き換えまし.size()た.length。それはより速く、まったく同じことをします:)

于 2013-07-18T17:59:29.407 に答える
1

クリックするたびに newItem を作成する必要があります。

var $list = $('#target ul');
$('#target ul').click(function() {
    var newItem = document.createElement('li');
    newItem.innerHTML = "list item " + ($list.children().length + 1);
    $list.append(newItem);
});

jsフィドル

アイテムをテンプレートとして作成し、それを再利用することもできます。

var $cloneItem = $('<li />');
var $list = $('#target ul');
$("#target").click(function () {
    $list.append($cloneItem.clone().html('list item ' + ($list.children().length + 1)));
});

jsフィドル

于 2013-07-18T17:59:41.927 に答える
0

同じ LI オブジェクトを再追加 (削除してから再度追加) するだけです。クリック関数内に新しい LI を作成する必要があります。

于 2013-07-18T18:00:16.493 に答える
0

できるよ：

$("#target").click(function() {
    $(this).find('ul')
        .append($('<li/>')
        .text('list item '+$(this).find('ul li').length+1));
});
于 2013-07-18T18:01:40.980 に答える