How to get each value of same class name?

Question

I have some tag with same class , i want get each their value and append it to a div how to do it

<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>");
}

the result :

location1

location1

location1

location1

it seems did apppend 4 times first class, how to get 1 and 2 and 3 and 4 ?

Answer 1

Use each in jquery to get text of all adr class . Do not append line by line as it takes more execution time.Try to append as a whole, Hope this helps

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

 <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> 

Answer 2

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

 <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> 

You can append all matched elements with .adr using append() . But only this would technically add the original elements and strip from it where it was previously situated in the DOM. So, clone() them to create a new copy of all elements and preserve it's previous state as well.

Answer 3

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

 <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> 

Answer 4

$('.something') returns an array, so you need $('.something')[i] to get each item from the array. You're calling three jQuery functions for every iteration of the loop - inefficient. Call them once each before the loop, assigning them to a variable, then use the variable instead of the jQuery calls.

Answer 5

You can use each() method. Secondly selecting "#test" and ".adr" is a bad idea declare them as global variable and use them.

 let elms = $(".adr"); let test = $('#test'); elms.each(function(){ test.append($(this).html() + "<br>") }) 

 <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> 

Using querySelectorAll() and map()

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

 <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>