jQuery addClass() à l'élément généré après append()

Je suis en train d'ajouter une classe nouvellement ajouté DIV sans l'aide de quelque chose comme:

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

Voici un exemple de ce que je suis en train de faire:

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

De chargement de la Page HTML ressemble à:

<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
    <div></div>
    <div></div>
    <div></div>
</div>
  • Le meilleur exemple n'est, en effet, une meilleure apparence. Quel est le problème que vous rencontrez?
InformationsquelleAutor Dan Kanze | 2012-10-16
  1. 12

    Lorsque vous ajoutez un élément à travers .append, il ne change pas le contexte de l'objet jQuery.

    Vous pouvez l'écrire comme ceci:

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

    ou

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

    (ces deux font la même chose, simplement dans des ordres différents, le deuxième peut être plus clair)

    le contexte de l'objet jQuery sera le nouvellement créé div.

    • J'étais sur le point de ce post, appendTo est définitivement la solution la plus élégante pour des OP de cas.
    • Quelle est la principale différence entre cette solution et Mark Reed, Gromer solution. Ce qui est plus efficace et pourquoi?
    • Eh bien, appendTo effectivement se retourne et appelle append, mais je doute qu'il n'y a aucune différence significative en termes d'efficacité. Donc, je dirais qu'il revient à qui de code vous préférez lire.
    • Je voudrais encore faire le addClass tout d'abord, juste pour être plus clair sur ce qui se passe: $('<div/>').addClass('lol'+i).appendTo(t.y).
    • cette solution est plus élégante, vraiment. Ils font tous essentiellement la même chose, et leurs réponses sont essentiellement identiques. jQuery encapsule des éléments du DOM avec jQuery objet, de sorte que si les objets sont filtrés, d'une certaine façon, le "contexte" sera toujours à ces objets. Lors de l'appel de append, il va générer le nouveau balisage (si nécessaire), et l'ajouter à la contexte actuel, mais le contexte reste le même, donc addClass sera appliquée à ce contexte, au lieu de la nouvellement créée div.
    InformationsquelleAutor Shmiddty
  2. 7
    t.y.append('<div></div>').addClass('lol'+i);

    devrait être 

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

    Dans le premier cas, vous êtes ajout de la classe à la division à laquelle vous ajoutez ..
    De SORTE que le contexte est toujours le div parent et pas le nouvellement ajouté div..

    Vous avez besoin de trouver d'abord à l'intérieur de la mère, puis ajouter la classe..

    MODIFIER

    Si vous voulez juste ajouter la classe pour le dernier élément ajouté à ... Trouver le dernier div dans le parent, puis ajouter la classe à elle..
    Ce sera assurez-vous de ne pas ajouter à la classe de tous les div à chaque fois que vous effectuez une itération dans la boucle..

    t.y.append('<div></div>').find('div:last').addClass('lol'+i);
    • +1 étant donné que la t.y ne pas avoir d'autres divs en elle
    • correct, pas d'autres divs. cependant, ce que je vois c'est que chaque itération ajoute un supplément de 'lol'+1. Par exemple: <div class='lol1 lol2 lol3'></div>
    • Case À Modifier.....
    • Semble stupide pour ajouter votre nouveau div conteneur, puis la racine autour de l'intérieur de ce conteneur à la recherche pour elle, quand vous pouvez simplement ajouter la classe que vous avez encore une prise sur la div que vous venez de créer...
    • Ouais.. c'est vrai.. au Lieu de cela, nous pouvons utiliser appendTo ou écrivez le code ici le contexte est le nouvellement ajouté div.. je voulais juste faire remarquer où les OP manquait sa logique..
    InformationsquelleAutor Sushanth --
  3. 3

    Essayez ceci:

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

    Violon: http://jsfiddle.net/gromer/QkTdq/

    • ou .append($('<div>', { 'class': 'lol'+i }));
    • Quelle est la principale différence entre cette solution et Shmiddty solution. Ce qui est plus efficace et pourquoi?
    InformationsquelleAutor Gromer
  4. 2
    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);
});
    InformationsquelleAutor Ivan Lazarevic
  5. 1

    Le problème est que append retourne le contenant plutôt que la chose que vous avez juste ajouté à la fin. Je voudrais juste faire le addClass avant la append au lieu d'après:

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

    MODIFIER ... ou, en d'autres termes, exactement ce que Gromer dit. Me battre par les cinq minutes entières, trop. Je suis lent.

    • Quelle est la principale différence entre cette solution et Shmiddty solution. Ce qui est plus efficace et pourquoi?
    • Comme je l'ai dit dans mon commentaire sur @schmiddty réponse, je doute qu'il ya une différence significative en termes d'efficacité, mais j'aime que les flux de Schmiddty du version mieux.
    InformationsquelleAutor Mark Reed
  6. 0

    Vous ne mentionnez pas pourquoi vous voulez le numéro de la class attribut de la liste de vos éléments, mais dans le cas que vous êtes réellement en utilisant le css n'oubliez pas que vous avez :impair et :même sélecteur css attritbutes et aussi l'équivalent pair/impair sélecteurs jQuery.

    http://www.w3.org/Style/Examples/007/evenodd.en.html

    http://api.jquery.com/odd-selector/

    InformationsquelleAutor Nick