0

クラス'item'が非表示になっているスタイル付き要素があります。最初、ページにはこのクラスの要素が1つだけあります。この非表示の要素をモデルとして使用しているだけです。jqueryを使用して、[アイテムの追加]ボタンがクリックされるたびに、内部テキストに正しいアイテム名を付けてリストに挿入できます。

私がやろうとしているのは、この非表示の「item」要素のクローンを作成し、Webページの最後のitem要素が配置されている場所の直後に挿入することです。それを見せて、内側のテキストを必要なものに変更してください。

私の現在の実装では、期待どおりにアイテムの複製/挿入が行われませんが、そうあるべきだと思いますが、おそらく何かが足りません。

私のマークアップ

<div class="item" style="border:1px solid blue; padding:7px; display:none;">hello</div>

アイテムを追加

私のJavaScript

$(".addItem").click(function(){

   //clone hidden item element blueprint
   $('.item').eq(0).clone().insertAfter('.item:last-child');


   //Change inner text of element
   $('.item:last-child').text("apples").show();
});

JSFiddle

http://jsfiddle.net/XPVAs/

4

2 に答える 2

2

:last代わりにセレクターが必要だとします:last-child。

$(".addItem").click(function(){

    //clone hidden item element blueprint
    $('.item').eq(0).clone().insertAfter('.item:last');


    //Change inner text of element
    $('.item:last').text("apples").show();
});

そしてここにデモがあります：http：//jsfiddle.net/XPVAs/3/

于 2013-01-15T19:32:27.150 に答える
0

変化する

$('.item:last-child').text("apples").show();

に

$('.item:last').text("apples").show();

次のリンクを注意深く読んでください。

http://api.jquery.com/last-child-selector/

http://api.jquery.com/last/

于 2013-01-15T19:49:06.103 に答える