如何使用Jquery将具有某个类的所有元素的内容放入一个变量中

Posted 2023-05-09

【中文标题】如何使用Jquery将具有某个类的所有元素的内容放入一个变量中

【英文标题】：How to put the content of all elements with a certain class in a variable with Jquery

【发布时间】：2014-08-09 05:51:16

【问题描述】：

使用 Jquery，我想将具有特定类的所有元素的内容放入一个变量中。这是一个例子：

<div class="foo">
    <div class="bar"><p>First set of text</p></div>
    <div class="bar"><p>Second set of text</p></div>
    <div class="bar"><p>Third set of text</p></div>
    <div class="bar"><p>N set of text</p></div>
</div>

我想将所有具有“bar”类的 div 元素的内容放入一个名为“full”的变量中。我已经尝试了以下代码，但显然只抓取了第一个 div。

var full = $( ".bar" ).html();

我希望我的字符串变量的内容是

"<p>First set of text</p><p>Second set of text</p><p>Third set of text</p><p>N set of text</p>"

如果尝试在互联网上查找但找不到答案。我正在考虑使用 .each 方法，但我的几次尝试效果不佳。有什么想法吗？

谢谢！

【参考方案1】：

你想使用.each()是对的：

var full = '';
$('.bar').each(function () 
    full += $.trim($(this).html());
)
console.log(full);

jsFiddle example

【讨论】：

非常感谢，这个原则在我的工作环境中非常有效。有朝一日我会分析这个函数以进一步了解它，但现在我只是把它当作礼物！ :)

如果您需要解释这段代码，请告诉我。

【参考方案2】：

如下使用.map()：

var full = $( ".bar" ).map(function() return this.innerHTML; ).get().join('');

Working Demo

请注意，在上述行中，this.innerHTML JS 等效于 jQuery 的 $(this).html()，这意味着您也可以使用 $(this).html()。

【讨论】：

谢谢，该解决方案似乎在 jsfiddle 中完美运行，尽管我使用了 j08691 的解决方案。非常感谢！