javascript - jQuery addClass() 到 append() 之后生成的元素

Question

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

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

这是我正在尝试做的一个更好的例子：

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

页面加载 HTML 如下所示：

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

Answer 1

当您通过 追加元素时.append，它不会更改 jQuery 对象的上下文。

你可以这样写：

$('<div></div>').appendTo(t.y).addClass('lol'+i);

或者

$('<div></div>').addClass('lol'+i).appendTo(t.y);

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

jQuery 对象的上下文将是新创建的 div。

Answer 2

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

应该

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

在第一种情况下，您正在向要附加的 div 添加类 .. 所以上下文仍然是父 div而不是新附加的div ..

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

编辑

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

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

Answer 3

试试这个：

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

小提琴：http: //jsfiddle.net/gromer/QkTdq/

Answer 4

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

Answer 5

问题是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));
});

编辑......或者，换句话说，正是格罗默所说的。也打败我整整五分钟。我越来越慢了。

Answer 6

您没有提及为什么要将class属性编号为列表项，但如果您实际上将它们用于 css，请不要忘记您有 :odd 和 :even css 选择器属性以及等效的奇数/偶数jQuery 选择器。

http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/

Answer 7

我没有找到这样的东西。注意类属性！

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