Jquery - Récupère le texte de plusieurs travées avec la même classe?

Question

Je suis relativement nouveau à jquery, j'ai donc ce que j'espère sera une question simple. Je dois ajouter plusieurs travées aux éléments de campagne dans une liste non ordonnée.
Essentiellement, chaque ligne contient un et je dois saisir le contenu de cette période et l'ajouter au fond de l'élément de ligne, il est contenu dans Voici ce que j'ai jusqu'à présent.

Mon code jquery:

$("ul").ready(function(){ 
    var Name = $(".name") .text(); 
    var Content = $(".content") .text(); 
    $("li") .append("<span class=\"additional\"><a href=\"/addinfo.php\">"+ Name +"'s additional info</a></span>"); 
}); 

Le code HTML d'origine, il doit modifier:

<ul> 
    <li> 
    <span class="name">John Doe</span><br /> 
    <span class="content">John is an excellent Swimmer</span><br /> 
    </li> 
    <li> 
    <span class="name">Jane Doe</span><br /> 
    <span class="content">Jane loves to play basketball</span><br /> 
    </li> 
</ul> 

Son e est la sortie que je reçois:

• John Doe
  John est un excellent nageur
  John DoeJane Doe informations supplémentaires

• Jane Doe
  Jane aime jouer au basket
  John DoeJane Doe'sadditional info

Voici le résultat souhaité:

• John Doe
  John est un excellent Nageur
  informations complémentaires de John Doe

• Jane Doe
  Jane aime jouer au basket
  informations supplémentaires de Jane Doe

Comme vous pouvez le voir, au lieu de prendre tous les var "Name" et de les assembler, au lieu d'utiliser simplement la variable "Name" de cet élément de ligne. Je suis sûr qu'il a besoin d'un type de ceci, $ (this), ou appel .each dessus, mais je ne peux pas trouver cela dans la documentation n'importe où.

Quelqu'un peut-il aider? Merci! Troy

Answer 1

Essayez cette

$("ul > li").each(function() { 
    var Name = $(".name", this) .text(); 
    var Content = $(".content", this) .text(); 
    $(this).append("<span class=\"additional\"><a href=\"/addinfo.php\">"+ Name +"'s additional info</a></span>"); 
}); 

Cette boucle permet de faire défiler chaque LI dans la liste UL et les traiter comme des entités individuelles. Vous avez eu deux problèmes majeurs. Le premier est que vous ne limitiez pas le contexte de votre sélection jQuery, donc vous obteniez les deux classes ".name" et les combiniez ensemble, c'est pourquoi vous avez obtenu les deux noms. Et puis vous avez ajouté les valeurs à tous les objets LI.

Answer 2

Il est ici: http://docs.jquery.com/Core/each#callback

J'attribuerait une classe à tous les éléments LI et

$(".li-class").each(function(){ 
    var Name = $(".name", this) .text(); 
    var Content = $(".content", this) .text(); 
    $(this) .append("<span class=\"additional\"><a href=\"/addinfo.php\">"+ Name +"'s additional info</a></span>"); 
});