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

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

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