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 ?

5 Answers

3
Community On Best Solutions

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>

2
mojtaba ramezani On

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>

0
Maheer Ali On

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>

2
vivek_23 On

$('#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.

1
Dinsdale Trelawney On

$('.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.