3
votes

Comment obtenir chaque valeur du même nom de classe?

J'ai une balise avec la même classe, je veux obtenir chacune leur valeur et l'ajouter à un div comment le faire

<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>

for (i=1;i<$(".adr").length;i++) {
    $("#test").append($(".adr").html() + "</br>");
}

le résultat:

location1

il semble avoir ajouté 4 fois la première classe, comment obtenir 1 et 2 et 3 et 4?

javascript jquery foreach

1 commentaires

$ ("# test"). append ($ (". adr"). eq (i) .html () ...

5 Réponses :

1
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>
<div id =test></div>

var rows = $(".adr");
for (var i = 0; i < rows.length; i++) {
    $("#test").append($(rows[i]).html() + "<br>")
}

0 commentaires

3
votes

Utilisez each dans jquery pour obtenir le texte de toutes les classes adr . Ne pas ajouter ligne par ligne car cela prend plus de temps d'exécution.Essayez d'ajouter dans son ensemble, j'espère que cela aide

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>
<div id =test></div>

var str=''
$('.adr').each(function(e){
     str+=$(this).text()+ "<br>"
})
$("#test").html(str)

0 commentaires

0
votes

Vous pouvez utiliser la méthode each () . Deuxièmement, sélectionner "#test" et ".adr" est une mauvaise idée de les déclarer comme variable globale et de les utiliser.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>

<div id="test">

</div>

document.querySelector('#test').innerHTML = [...document.querySelectorAll('.adr')].map(x => x.innerHTML).join("<br>")

Utilisation de `querySelectorAll ()` et `map()`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="adr">location1</p>
<p class="adr">location2</p>
<p class="adr">location3</p>
<p class="adr">location4</p>

<div id="test">

</div>

let elms = $(".adr");
let test = $('#test');

elms.each(function(){
  test.append($(this).html() + "<br>")
})

0 commentaires

2
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="adr">location1</p>
	<p class="adr">location2</p>
	<p class="adr">location3</p>
	<p class="adr">location4</p>

	<div id="test"></div>

$('#test').append($('.adr').clone());

Vous pouvez ajouter tous les éléments correspondants avec .adr en utilisant append () . Mais seulement cela ajouterait techniquement les éléments d'origine et en retirerait où il était auparavant situé dans le DOM. Donc, clonez () les pour créer une nouvelle copie de tous les éléments et conserver également leur état précédent .

0 commentaires

1
votes

$ ('. something') renvoie un tableau, vous avez donc besoin de $ ('. something') [i] pour récupérer chaque élément du tableau. Vous appelez trois fonctions jQuery pour chaque itération de la boucle - inefficace. Appelez-les une fois chacun avant la boucle, en les affectant à une variable, puis utilisez la variable au lieu des appels jQuery.

0 commentaires

Comment obtenir chaque valeur du même nom de classe?

Utilisation de querySelectorAll () et map()

Utilisation de `querySelectorAll ()` et `map()`