jQuery sélection multiple ne fonctionne pas

Question

J'ai un divs qui se crée avec un identifiant et ajouter la durée avec des propriétés CSS prédéfinies

$(".main").append("<div class=largeBox id=" + counter + "</div>"); 
$(".largeBox").append("<span class=mainTitle></span>"); 

Je suis en train de charger du texte dans des boîtes, mais la sélection ne pouvais pas travailler . Quelqu'un peut-il me conseiller pourquoi?

var id = "#" + counter; 
$(id + " .mainTitle").text(title); 

Answer 1

Vous ne vraiment besoin d'avoir des guillemets autour classnames ou ID et je les ai volontairement omis dans ma réponse à montrer que ce n'est pas le problème ici.
Votre problème était que vous étiez en train d'ajouter toutes les extensions à toutes les précédentes divs. J'ai ajouté une boucle for afin que vous puissiez voir comment cela fonctionne maintenant, mais l'utilisation de $(".largeBox").eq(counter) fait que les titres s'ajoutent à chaque div séparément.

En outre, les ID ne doivent pas commencer par un numéro (si vous voulez soutenir les navigateurs HTML4), maintenant leur forme est lb-number (lb pour largeBox)

var counter = 0; 
 
for(counter=0;counter<5;counter++){ 
 
$(".main").append("<div class=largeBox id=lb-" + counter + "></div>"); 
 
$(".largeBox").eq(counter).append("<span class='mainTitle'></span>"); 
 
    
 
var id = "#lb-" + counter; 
 
$(id + " .mainTitle").text("test"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 

 
</div>

Answer 2

Vous ajoutez n'est pas entièrement correct. Vous devez ajouter des guillemets autour des propriétés de la classe et de l'ID.

De plus, vous manquez une balise fermeture de votre div.

$(".main").append('<div class="largeBox" id="' + counter + '"></div>'); 
$(".largeBox").append('<span class="mainTitle"></span>'); 

Answer 3

Vous devez placer les valeurs de classe et d'id entre guillemets. Il existe deux types de guillemets que vous pouvez utiliser: " et '.

var counter = 0; 
 

 
$(".main").append("<div class='largeBox' id='" + counter + "'></div>"); 
 
$(".largeBox").append("<span class='mainTitle'></span>"); 
 

 
var id = "#" + counter; 
 
$(id + " .mainTitle").text("test");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 

 
</div>