jQuery .text() 多个元素相同 class

Question

我正在尝试对页面上的多个（未知数量）元素使用 .text()。

考虑：

<ul>
    <li class="myClass">element1</li>
    <li class="myClass">element2</li>
    <li class="myClass">element3</li>
</ul>

$('.myClass').text();

将return第一个元素的文本"element1"。

我环顾四周时遇到了以下情况：

$('.myClass').each(function(index, obj)
{
   // do something
});

然而，这只是查询 returns 每个完整的元素，如：

<li class="myClass">element1</li>
<li class="myClass">element2</li>
<li class="myClass">element3</li>

我需要 return 所有元素的文本，例如：

"element1" "element2" "element3"

谢谢！

Answer 1

您可以使用 map() 检索一组元素中的特定属性并将它们放入数组中：

var textValues = $('.myClass').map(function() {
    return $(this).text();
}).get();

从那里您可以根据需要使用数组创建字符串，例如，使用 join():

console.log(textValues.join(', ')); // = 'element1, element2, element3'

var textValues = $('.myClass').map(function() {
  return $(this).text();
}).get();

console.log(textValues.join(', ')); // = 'element1, element2, element3'

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="myClass">element1</li>
  <li class="myClass">element2</li>
  <li class="myClass">element3</li>
</ul>

2020 年 3 月更新

现在可以使用 ES6 的箭头函数使 map() 调用变得更加简单。

var textValues = $('.myClass').map((i, el) => el.innerText.trim()).get();

但是请注意，这在 IE 中不起作用。如果您需要旧版浏览器支持，则需要使用第一个示例中的方法。

Answer 2

利用$(this)..!

var string = null;

$('.myClass').each(function(index, obj){
    // do something
    string += $(this).text();
});

Answer 3

var x =[];
$('.myClass').each(function(index, obj)
{
  x.push($(this).text());
});

console.log(x);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="myClass">element1</li>
    <li class="myClass">element2</li>
    <li class="myClass">element3</li>
</ul>

Answer 4

简单地连接.each中的文本。这是一个DEMO

此处修改jQuery：

 $(function() {
    var names = '';
    $('.myClass').each(function(index, obj) {
        names += $(this).text() +',';
    });
    alert(names);
});

jQuery .text() 多个元素相同 class

jQuery .text() multiple elements same class

each

jquery

text