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

Question

I am trying to add a class to a newly appended DIV without using something like:

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:

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

Answer 1

When you append an element through .append , it doesn't change the context of the jQuery object.

You could write it like this:

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

or

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

(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.

Answer 2

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 div and not the newly appended 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..

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

Answer 3

Try this:

tyappend($('<div></div>').addClass('lol'+i));

Fiddle: 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

The problem is that append returns the container instead of the thing you just appended to it. I would just do the addClass before the append instead of after:

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.

Answer 6

You don't mention why you want to number the class attribute 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.

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

Answer 7

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