Question

我有div这样的内容：

<div class="foobar">Red</div>
<div class="foobar">Yellow</div>
<div class="foobar">Cyan</div>
<div class="foobar">Luke Skywalker</div>
<div id="data"></div>

我使用这个jQuery函数来替换div中的文本。毕竟，我将另外两个.foobar div添加到#data：

$(function() {
    $(".foobar").each(function() {
        $(this).html("Black");
    });
    appendDiv();
});

function appendDiv() {
    $("#data").append("<div class='foobar'>White</div>");
    $("#data").append("<div class='foobar'>Orange</div>");
}

在这里，我不知道如何将附加的.each函数应用于附加的div。我试过了，但它对我没用：

$("#data").on("load", ".foobar", function(){
    $(this).html("Black");
});

如何将.each函数应用于追加的html？

Answer 1

＆＃13;

function appendDiv() {
  $("#data").append("<div class='foobar'>White</div>");
  $("#data").append("<div class='foobar'>Orange</div>");
}


$("#data").on("click", function() {
  appendDiv();
  $(".foobar").each(function() {
    $(this).html("Black");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foobar">Red</div>
<div class="foobar">Yellow</div>
<div class="foobar">Cyan</div>
<div class="foobar">Luke Skywalker</div>
<div id="data">[TEST click me]</div>

＆＃13;

Answer 2

将结果$（＆＃34; .foobar＆＃34;）存储在变量中，或者再次使用此表达式。

Answer 3

这应该有效，

$(".foobar").each(function(index, el) {
    $("#data").append($(el).clone());
    console.log($("#data").html());
});

<强>解释：它使用类foobar和 clones 遍历所有div，而不是将每个div附加到数据div。

将函数应用于附加的jQuery元素

3 个答案: