Question

我正在尝试按钮单击事件在屏幕上创建一堆框。我需要每个框（div）在其中创建另一个div，然后能够调用该div特别是为了样式。

现在，我已经为每个分配了类，但是如何使用$(this)仅按类抓取新创建的（最后一个）div，而不是选择每个元素页面？

我遇到了问题，尤其是 child 和此命令。

HTML：

<body> <button id="add-product">Add Product</button> <section class="products"> <div class="outer"> <div class="inner"></div> </div> </section> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> </body>

JQUERY：

$('#add-product').on('click', function() { // Call addProduct() function addProduct(); }); // Add-Product Function var addProduct = function() { $('.products').append("<div></div>").children().addClass('image'); var lastdiv = $('.image').last(); $(lastdiv).append("<div></div>"); var innerdiv = $(lastdiv).children(); $(innerdiv).addClass('overlay'); };

Answer 1

在添加之前，只需存储新创建的元素（在变量中）：

var addProduct = function() {
  var $newDiv = $("<div>");
  $('.products').append($newDiv).children().addClass('image');

  var $newInnerDiv = $("<div>");
  $newDiv.append($newInnerDiv);

  $newInnerDiv.addClass('overlay');
};

Answer 2

只需创建可引用的适当元素

$('#add-product').on('click', function() {
    var div1 = $('<div />', {'class': 'image'}),
        div2 = $('<div />', {'class': 'overlay'});

    $('.products').append( div1.append( div2 ) );
});

将一个类添加到新创建的元素中，所有这些追加和儿童的废话是完全不必要的

选择＆＃34;这个＆＃34;使用jQuery按钮单击动态创建后的元素

2 个答案: