如何获得相同类名的每个值？

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

似乎第一堂课要补4次，如何获得1和2以及3和4？

Answer 1

在jquery中使用each来获取所有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

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 3

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

您可以使用append()在所有匹配的元素后附加.adr。但是，只有这样才能从技术上添加原始元素，并从中删除原来位于DOM中的位置。因此，clone()用它们来创建所有元素的新副本并保留其先前状态。

Answer 4

$（'。something'）返回一个数组，因此您需要$（'。something'）[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>