Javascript 将jQuery addClass（）添加到append（）之后生成的元素

我正在尝试将一个类添加到新附加的DIV中，而不使用以下内容：

t.y.append('<div class="lol'+i+'"></div>');

t.y.append（“”）；

下面是一个更好的例子，说明我正在尝试做什么：

var t = this;

$(this.x).each(function(i, obj) {
    //append new div and add class too <div></div>
    t.y.append('<div></div>').addClass('lol'+i);
});

var t=this；
$（this.x）.每个（函数（i，obj）{
//附加新div并添加类
t、 y.append（“”）.addClass（'lol'+i）；
});

页面加载HTML如下所示：

<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
    <div></div>
    <div></div>
    <div></div>
</div>

t.y.append（“”）.addClass（'lol'+i）；

应该是

t.y.append('<div></div>').find('div').addClass('lol'+i);

t.y.append（“”）.find（'div'）.addClass（'lol'+i）；

在第一种情况下，您将向要追加的div添加类。。 因此，上下文仍然是父div，而不是新添加的div

您需要首先在父级中找到它，然后添加类

编辑

如果您只想将类添加到最后一个附加的元素。。。找到父级中的最后一个div，然后将该类添加到其中。。 这将确保每次在循环中迭代时不会将类添加到所有div中

t.y.append('<div></div>').find('div:last').addClass('lol'+i);

t.y.append（“”）.find（'div:last'）.addClass（'lol'+i）；

试试这个：

t.y.append（$（''）.addClass（'lol'+i））

小提琴：
var t=this；
$（this.x）.每个（函数（i，obj）{
//附加新div并添加类
变量d=$（''）.addClass（'lol'+i）；
t、 y.d；
});
您没有提到为什么要为列表项的
类
属性编号，但是如果您实际将它们用于css，请不要忘记您有：奇数和：偶数css选择器属性以及等效的奇数/偶数jQuery选择器



问题在于
append
返回容器，而不是您刚才附加到容器中的内容。我只需在
追加
之前执行
添加类
，而不是在之后：

var t = this;

$(this.x).each(function(i, obj) {
    //append new div and add class too <div></div>
    t.y.append($('<div></div>').addClass('lol'+i));
});

var t=this；
$（this.x）.每个（函数（i，obj）{
//附加新div并添加类
t、 追加（$（''）.addClass（'lol'+i））；
});

编辑。。。或者，换句话说，就是格罗默所说的。也比我快了整整五分钟。我变慢了。
当您通过
.append
附加元素时，它不会更改jQuery对象的上下文

你可以这样写：

$（''）.appendTo（t.y）.addClass（'lol'+i）

或

$（''）.addClass（'lol'+i）.appendTo（t.y）

（它们都做同样的事情，只是顺序不同，第二种可能更清楚）

jQuery对象的上下文将是新创建的div。
我没有找到类似的内容。注意class属性

$.each(obj, function (_index, item) {
    resultContainer.append($('<li>', {
      class: "list-group-item",
      value: item.id,
      text: item.permitHolderName || item.permitHolderId
    }));
});

$。每个（对象、功能（_索引、项）{
resultContainer.append（$（“
”）{
类：“列表组项目”，
值：item.id，
文本：item.permitholder名称| | item.permitholder ID
}));
});
您更好的示例看起来确实更好。你的问题是什么？正确，没有其他div。然而，我看到的是，每次迭代都会附加一个附加的
'lol'+1
。例如：
将新的div添加到容器中，然后在容器中查找它，这似乎很愚蠢，因为您可以在仍然掌握刚刚创建的div的情况下添加类…@MarkReed。。是的。。那是真的。。我们可以使用appendTo或编写本文中的代码，而上下文是新添加的div。。我只是想指出OP缺少逻辑的地方。我正要发布这篇文章，
appendTo
无疑是OP案例中最优雅的解决方案。此解决方案与
Mark Reed
，
Gromer
解决方案之间的主要区别是什么。哪个更有效？为什么？好吧，
appendTo
有效地转身调用
append
，但我怀疑是否有任何显著的效率差异。因此，我想说的是你更喜欢读哪种代码。我仍然会先做
addClass
，只是为了更清楚地了解发生了什么：
$（''）.addClass（'lol'+I.）.appendTo（t.y）
@DanKanze这个解决方案真的更优雅。他们都做了基本相同的事情，他们的答案基本相同。jQuery用jQuery对象包装DOM元素，因此除非以某种方式过滤对象，否则“上下文”将始终是这些对象。调用
append
时，它将生成新标记（必要时），并将其附加到当前上下文中，但上下文保持不变，因此
addClass
将应用到该上下文而不是新创建的div。此解决方案与
shmiddy
解决方案之间的主要区别是什么。哪个更有效？为什么？此解决方案与
shmiddy
解决方案的主要区别是什么。哪一个更有效？为什么？正如我在评论@schmiddty的答案时所说，我怀疑是否存在显著的效率差异，但我更喜欢schmiddty版本的流程。
var t = this;

$(this.x).each(function(i, obj) {
    //append new div and add class too <div></div>
    t.y.append($('<div></div>').addClass('lol'+i));
});

$.each(obj, function (_index, item) {
    resultContainer.append($('<li>', {
      class: "list-group-item",
      value: item.id,
      text: item.permitHolderName || item.permitHolderId
    }));
});