jquery - 仅选择附加的孩子

Question

我只想将该类应用于动态创建的 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

Answer 1

我认为您要做的是将活动类添加到新添加的项目中，然后您可以使用.appendTo()而不是.append()，如下所示

$('<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');

演示：小提琴

Answer 2

只需稍微更改链接方法的顺序：

   $('<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/

Answer 3

你可以试试这个

  <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>

Answer 4

试试这样：

$(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/