web-dev-qa-db-fra.com

Comment puis-je ajouter du texte à un élément div spécifique à l'aide de jQuery?

J'ai un problème avec jquery.Mon HTML est 

<div id="first">
   <span class="test"></span>
</div>
<div id="second">
   <span class="test"></span>
<div>

Maintenant j'essaye d'ajouter du texte en utilisant Jquery

$j('span.test').text('Welcome');

Après cela devient

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test">Welcome</span>
<div>

Mais, je cherche à atteindre est,

<div id="first">
    <span class="test">Welcome</span>
</div>
<div id="second">
    <span class="test"></span>
<div>

Comment puis-je faire cela dans jQuery?

Merci

javascriptjqueryhtml
9
user1311776

Plusieurs alternatives possibles

D'autres ont déjà fourni leurs réponses, mais laissez-moi vous proposer d'autres solutions.

$("span.test:first").text("Welcome");
$("#first span.test").text("Welcome");
$("span.test").first().text("Welcome");
$("span.test").eq(0).text("Welcome");
$("span.test", "#first").text("Welcome");

Le deuxième et dernier étant probablement le plus rapide, car ils ciblent un conteneur particulier par ID.
(Les optimisations internes de jQuery peuvent me prouver le contraire avec toutes les versions futures)

Comparaison de performance

Voici un test JSPerf que les performances comparent les possibilités supérieures. Comme prévu, les deuxième et dernière approches sont les plus rapides, car la sélection des éléments est très simplifiée. J'ai essayé de les exécuter sur Chrome et vous pouvez les exécuter dans d'autres navigateurs si vous le souhaitez et que vous voyez les différences.

8
Robert Koritnik
$('#first span.test').text('Welcome');

les sélecteurs jQuery sont des sélecteurs CSS étendus avec un brin de magie. Vous pouvez trouver tout ce que vous devez savoir ici: http://api.jquery.com/category/selectors/

4
Milimetric

Vous devez utiliser le sélecteur :first pour indiquer que vous souhaitez uniquement ajouter du texte au premier élément trouvé par le sélecteur. Essaye ça:

$j('span.test:first').text('Welcome');

Exemple de violon

Sinon, vous pouvez utiliser la id de la div parente pour rendre le sélecteur unique:

$j('#first .test').text('Welcome');
1
Rory McCrossan

Puisque vous avez un identifiant, qui est généralement unique sur une page, il serait préférable d'utiliser les éléments suivants:

$("#first span.test").text("Welcome");
0
rongsir

Dans cet exemple, vous pouvez faire ce que RoRyMcCrossan Pour la sélection générale, je vous recommande de regarder ceci: http://api.jquery.com/child-selector/

Ou vous pouvez utiliser ceci

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

0
David H