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个孩子？ / p>

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

演示：Fiddle

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>

OR

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

仅选择附加的子项

4 个答案: