0

動的に作成された div にのみクラスを適用したい。

HTML:

<div id="pbody">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
</div>


<button class="add">Add</button>

jQuery:

$(document).on('click','.add',function(){

   $('#pbody').append('<div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>').addClass('active');

});

私はそれが間違っていることを知っていますが、追加した div のみを選択できる方法はありますか、または jQuery で 5 番目の子と 10 番目の子を選択する (たとえば) 方法はありますか?

JSFiddle: http://jsfiddle.net/Q4PYC

4

4 に答える 4

1

あなたがしようとしているのは、新しく追加されたアイテムにアクティブなクラスを追加することだと思います。次に、以下に示すように、.append ()の代わりに.appendTo( ) を使用できます。

$('<div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>').appendTo('#pbody').addClass('active');

デモ:フィドル

于 2013-11-05T08:22:33.513 に答える
0

チェーンされたメソッドの順序を少し変更するだけです:

   $('<div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>')
   .addClass('active')
   .appendTo('#pbody');

http://jsfiddle.net/Q4PYC/2/

于 2013-11-05T08:24:54.880 に答える
0

あなたはこれを試すことができます、

  <script type="text/javascript">

            $(document).on('click','.add',function(){
                    // added classname for all the append div elements
                 $('#pbody').append('<div class="appendHtml">f</div><div class="appendHtml">g</div><div class="appendHtml">h</div><div class="appendHtml">i</div><div class="appendHtml">j</div><div class="appendHtml">k</div><div class="appendHtml">l</div>').addClass('active');

                    $(".appendHtml").each(function( index, value ) {
                        console.log( index + ": " + value );                            
                    });
            });

        </script>

また

        <script type="text/javascript">

            $(document).on('click','.add',function(){

               $('<div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>').addClass('appendHtml').appendTo('#pbody');
                    $(".appendHtml").each(function( index, value ) {
                        console.log( index + ": " + value );                            
                    });
                 });

        </script>
于 2013-11-05T08:25:40.667 に答える
0

このようにしてみてください：

$(document).on('click','.add',function(){ 
   $('#pbody').append('<div>f</div><div>g</div><div>h</div><div>i</div><div>j</div><div>k</div><div>l</div>');
   $("#pbody div:gt(5)").addClass('active'); 
});

http://jsfiddle.net/alaminopu/Q4PYC/3/を確認してください

于 2013-11-05T08:28:06.293 に答える