Как получить каждое значение с тем же именем класса?

Question

У меня есть какой-то тег с тем же классом, я хочу получить каждому их значение и добавить его в div, как это сделать

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

результат:

location1

location1

location1

location1

Кажется, что это первый раз в первом классе, как получить 1, 2, 3 и 4?

Answer 1

Используйте each в jquery, чтобы получить текст всего adr класса. Не append построчно, так как это занимает больше времени выполнения. Попробуйте добавить в целом, надеюсь, это поможет

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>

Вы можете добавить все подходящие элементы с помощью .adr, используя append () . Но только это технически добавит оригинальные элементы и уберет их там, где они ранее находились в DOM. Итак, clone () их, чтобы создать новую копию всех элементов и сохранить ее прежнее состояние.

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

$ ('. Что-то') возвращает массив, поэтому вам нужно $ ('. Кое-что') [i], чтобы получить каждый элемент из массива. Вы вызываете три функции jQuery для каждой итерации цикла - неэффективно. Вызывайте их один раз перед циклом, присваивая их переменной, затем используйте переменную вместо вызовов jQuery.

Answer 5

Вы можете использовать each() метод.Во-вторых, выбор "#test" и ".adr" - плохая идея объявить их как глобальную переменную и использовать их.

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>

Использование querySelectorAll() и 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>