javascript jQuery addClass() 到 append() 后生成的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12923970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery addClass() to element generated after append()
提问by Dan Kanze
I am trying to add a class to a newly appended DIV without using something like:
我正在尝试将一个类添加到新添加的 DIV 而不使用以下内容：
t.y.append('<div class="lol'+i+'"></div>');
Here's a better example of what I'm trying to do:
这是我正在尝试做的一个更好的例子：
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);
});
Page load HTML looks like:
页面加载 HTML 如下所示：
<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
<div></div>
<div></div>
<div></div>
</div>
回答by Shmiddty
When you append an element through .append, it doesn't change the context of the jQuery object.
当您通过 附加元素时.append，它不会更改 jQuery 对象的上下文。
You could write it like this:
你可以这样写：
$('<div></div>').appendTo(t.y).addClass('lol'+i);
$('<div></div>').appendTo(t.y).addClass('lol'+i);
or
或者
$('<div></div>').addClass('lol'+i).appendTo(t.y);
$('<div></div>').addClass('lol'+i).appendTo(t.y);
(these both do the same thing, simply in different orders, the second possibly being more clear)
（这些都做同样的事情，只是顺序不同，第二个可能更清楚）
the context of the jQuery object will be the newly created div.
jQuery 对象的上下文将是新创建的 div。
回答by Sushanth --
t.y.append('<div></div>').addClass('lol'+i);
should be
应该
t.y.append('<div></div>').find('div').addClass('lol'+i);
In the first case you are adding class to the div to which you are appending .. SO the context is still the parent divand not the newly appendeddiv..
在第一种情况下，您将类添加到要附加到的 div .. 所以上下文仍然是父 div而不是新附加的div ..
You need to find it first inside the parent and then add the class..
您需要先在父级中找到它，然后添加类..
EDIT
编辑
If you want to just add the class to the last appended element ... Find the last div in the parent and then add the class to it.. This will make sure you are not adding the class to all the div's every single time you iterate in the loop..
如果您只想将类添加到最后一个附加元素...在父项中找到最后一个 div，然后将类添加到它...这将确保您不会每次都将类添加到所有 div在循环中迭代..
t.y.append('<div></div>').find('div:last').addClass('lol'+i);
回答by Gromer
Try this:
试试这个：
t.y.append($('<div></div>').addClass('lol'+i));
t.y.append($('<div></div>').addClass('lol'+i));
回答by Ivan Lazarevic
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
var d = $('<div />').addClass('lol' + i);
t.y.append(d);
});
回答by Mark Reed
The problem is that appendreturns the container instead of the thing you just appended to it. I would just do the addClassbeforethe appendinstead of after:
问题是append返回容器而不是您刚刚附加到它的东西。我只想做addClass之前的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));
});
EDIT... or, in other words, exactly what Gromer said. Beat me by five whole minutes, too. I'm getting slow.
编辑...或者，换句话说，正是格罗默所说的。也比我整整打了五分钟。我越来越慢了。
回答by Edi
I didn't find anything like this. notice the class attribute!
我没有找到类似的东西。注意类属性！
$.each(obj, function (_index, item) {
resultContainer.append($('<li>', {
class: "list-group-item",
value: item.id,
text: item.permitHolderName || item.permitHolderId
}));
});
回答by Nick
You don't mention why you want to number the classattribute to your list items, but in the case that you are actually using them for css don't forget you have :odd and :even css selector attritbutes and also the equivalent odd/even jQuery selectors.
您没有提到为什么要为class列表项的属性编号，但是如果您实际上将它们用于 css，请不要忘记您有 :odd 和 :even css 选择器属性以及等效的奇数/偶数jQuery 选择器。
http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/
http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/
