Comment créer un object jQuery vide et non nul prêt à être ajouté?

Je veux append du code HTML à un object jQuery vide non vide uniquement dans la boucle, mais cela ne fonctionne pas à moins que je crée un object et ajoute une balise HTML lors de la création. Comment créer un object jQuery vide et pouvoir y append du HTML ultérieurement?

//var $new = $().add(""); //can't use this object in the loop //var $new = $([]); //can't use this object in the loop //var $new = $(); //can't use this object in the loop //var $new = $("#nonexistingelement"); //can't use this object in the loop var $new = $().add(""); //works but I don't want to add any html at this point. $.each(.....) { $new.append(""); }); alert($new.html()); //should display some html 

Ajout: http://jsfiddle.net/vfPNT /

Votre problème ici est qu’il n’ya pas d’objects “null” jQuery qui ne peuvent pas être ajoutés et “vides”. Vous avez déjà identifié plusieurs façons de créer une version vide, et même s’il y en a peut-être davantage, ce que vous essayez de faire ne fera tout simplement pas ce à quoi vous vous attendez, peu importe comment vous commencez. , car…

append() modifie le DOM, pas l’object jQuery. Et un object jQuery vide n’a pas de DOM ! Tomalak avait la bonne idée , même si vous ne l’aviez pas comprise.

Je vais faire trois observations à propos de jQuery dont vous êtes probablement déjà au courant, mais qui sont utiles pour comprendre le rest de cette réponse et peuvent donc être utiles aux futurs lecteurs:

  1. Un object jQuery est fondamentalement un ensemble d’éléments DOM.
  2. Certaines méthodes jQuery opèrent sur l’ensemble et certaines fonctionnent sur les nœuds de l’ensemble.
  3. Certaines méthodes jQuery ne fonctionnent que sur (ou récupèrent des informations uniquement) du premier nœud ajouté à l’ensemble.

En tenant compte de ces trois observations, considérons votre exemple:

 // 1. create an empty set somehow (doesn't matter how) var $new = $(); // 2. iterate over something $.each( ..., function( ... ) { // 3. construct a DOM fragment from HTML, and append it $new.append(""); }); // 4. try to display HTML corresponding to the jQuery object alert($new.html()); 

Dans cet exemple, l’étape n ° 3 ne peut rien faire d’utile car le but de append() est de prendre tous les éléments DOM fournis et de les append en tant qu’enfants à chaque élément DOM de l’ensemble. Puisque $new est un ensemble vide , il n’y a pas d’éléments à append, et … rien ne se produit. L’étape n ° 1 fonctionne correctement – mais en créant un ensemble sans aucun élément DOM, vous vous êtes mis en échec lorsque vous essayez d’utiliser des méthodes existantes pour modifier le DOM! Observation de référence # 2 … pour modifier l’ensemble, vous devez appeler une méthode qui fonctionne réellement sur l’ensemble.

Ok, alors disons que nous utilisons la méthode de modification de set add() place:

  $new = $new.add(""); 

Maintenant nous sums bons, non? Chaque passage dans la boucle créera un nouvel object jQuery comprenant l’ensemble précédent + un élément nouvellement créé. Bien…

… cela fera que l’étape 4 fera quelque chose de bizarre. Voir, html() est l’une des méthodes que j’ai mentionnées dans l’Observation n ° 3 – elle ne fonctionne que sur le premier élément de l’ensemble. Ainsi, au lieu d’une séquence ( "..." ), vous obtiendrez une représentation HTML de l’élément créé lors de la première passe de la boucle ( "" ). Sauf que … Vous ne le saurez même pas, car html() crée une représentation des enfants de l’élément – de sorte que ce que vous allez vraiment finir est ""

C’était tout simplement une grosse déception: vous avez commencé à travailler avec le set (étape 1), puis vous avez essayé de fonctionner sur le DOM (étape 3) et vous avez fini d’essayer d’extraire des données d’ un élément DOM (ce qui n’a pas été le cas). t existent) (et n’aurait pas eu de données si c’était le cas) (étape 4).

La solution que vous avez finalement trouvée n’est pas terrible: vous optez essentiellement pour append un élément racine au jeu, et opérez entièrement sur ce fragment DOM jusqu’à ce que vous ayez ajouté de nouveaux éléments et que vous soyez prêt à les utiliser. . Vous l’avez omis de votre exemple révisé, mais html() fonctionnerait aussi, car il viderait simplement le contenu de votre élément racine.

Mais pour être complet, je vais vous donner un dernier exemple qui fonctionne sur le jeu , en commençant par un object jQuery vide:

 var $new = $(); $.each( [1, 2, 3, 4], function(i, v) { $new = $new.add("
"); }); alert($new.length == 4); // true // alerts:
alert($("
").append($new).html());

Les fragments de document sont parfaits pour cela; crée un object vide prêt à être ajouté. 🙂

 $(document.createDocumentFragment()) 

Votre object $new est un sélecteur vide, donc append n’a aucun ensemble à append.

add est nécessaire pour append un noeud DOM, puis vous ajoutez à ces noeuds DOM. Ne pensez pas que vous pouvez éviter de commencer avec un .add .

J’ai testé la solution ci-dessus mais elle n’a pas fonctionné pour moi, elle est toujours restée comme un object jQuery vide …

Si quelqu’un est intéressé, voici ma solution:

 var jQueryElements = [], $new; $.each( [1, 2, 3, 4], function(i, v){ jQueryElements = jQueryElements.push($('
').get(0)); }); $new = $(jQueryElements);

Je ne pouvais pas trouver un autre moyen alors j’ai commencé avec le

. Supprimer le

tout en gardant le contenu ne fonctionnait pas correctement et c’est pourquoi j’ai posté la question. Donc, au lieu de cela, j’ai créé une nouvelle sélection jQuery en sélectionnant tous les 's which were inside the

et jeté $ new.

 var $new = $().add(""); $.each(.....) { $new.append(""); }); $new.append(""); $newObject = $('sometagt', $new) ..... do more work using $newObject 

si vous ne voulez pas vous retrouver avec une étiquette laide:

 if(!$new){ $new.append(""); } else { var $new = $("");