CODEWITHSUNDEEP
javascriptjqueryforeach
lolololhahahahaha
lolololhahahahaha

Reputation: 107

How to get each value of same class name?

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 ?

Upvotes: 3

Views: 901

Answers (5)

Dinsdale Trelawney
Dinsdale Trelawney

Reputation: 43

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

Upvotes: 1

nice_dev
nice_dev

Reputation: 17805

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

Upvotes: 2

mojtaba ramezani
mojtaba ramezani

Reputation: 1559

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>

Upvotes: 1

Maheer Ali
Maheer Ali

Reputation: 36564

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>

Upvotes: 0

Deepak A
Deepak A

Reputation: 1636

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>

Upvotes: 4

Related Questions