在jQuery中获取列表元素内容的数组答案

【问题标题】：Get an array of list element contents in jQuery在jQuery中获取列表元素内容的数组
【发布时间】：2008-10-29 14:32:53
【问题描述】：

我有这样的结构：

<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

如何使用 javascript 或 jQuery 将文本作为数组获取？

['text1', 'text2', 'text3']

之后我的计划是将其组装成一个字符串，可能使用.join(', ')，并以如下格式获取：

'"text1", "text2", "text3"'

【问题讨论】：

标签： javascript jquery

【解决方案1】：

var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

...应该可以解决问题。要获得您正在寻找的最终输出，join() 加上一些连接会很好：

var quotedCSV = '"' + optionTexts.join('", "') + '"';

【讨论】：

jQuery 是否保证查询返回的元素的顺序？我会假设返回的顺序与 DOM 中的顺序相同（即 text1、text2、text3），但我不知道在文档中查找什么来查看这是否属实。
我从未见过它以任何其他方式以正常的阅读顺序遍历 DOM。因此，尽管我无法证明这一点，但我敢打赌农场它总是从上到下遍历 DOM :)
$.each 不是被认为性能不佳吗？如果是，有没有其他方法可以做到？
您有多少列表项表明这是一个问题，@Daniel？是的，还有其他方法可以做同样的事情（您可以使用 $.map() 一次性生成数组），但它们的作用相同。
@Shog9：我希望将字典推送到列表，该列表从表的每一行的两个不同列中获取值。没有更简单的方法吗？提前致谢。

【解决方案2】：

没有多余的中间数组：

var arr = $('li').map(function(i,el) {
    return $(el).text();
}).get();

见 jsfiddle demo

【讨论】：

你最后错过了.get()。
基于 Felix Klings 的建议：arr = $('li').map(function(){ return $(this).text(); }).get();
我不明白为什么需要“获取函数”。
api.jquery.com/map 解释了为什么需要 .get() （“由于返回值是一个 jQuery 包装的数组，因此 get() 返回的对象与基本数组一起使用是很常见的。 ")。
更糟糕的是，迭代器错了，你需要切换元素和索引，让它说function(i, el)。

【解决方案3】：

在干净的 javascript 中：

var texts = [], lis = document.getElementsByTagName("li");
for(var i=0, im=lis.length; im>i; i++)
  texts.push(lis[i].firstChild.nodeValue);

alert(texts);

【讨论】：

【解决方案4】：

kimstik 很接近，但不完全。

这里是如何在一个方便的单行中做到这一点：

$.map( $('li'), function (element) { return $(element).text() });

这里是 jQuery 的 map 函数的完整文档，非常方便：http://api.jquery.com/jQuery.map/

只是为了完整回答，这里是您正在寻找的完整功能：

$.map( $('li'), function (element) { return $(element).text() }).join(', ');

【讨论】：

我刚刚在这里看到了这个 (stackoverflow.com/questions/4856283/…) 并打算重新发布，因为这是一个很棒的技巧
我的方法应该快一点..还是不？
kimstik，根据 Benchmark.js，我的函数调用分别为 Opera 和 Chrome 执行 11,252 / 9,685 ops/sec，而您发布的方法调用在 40 个列表中执行 9,666 / 9,083 ops/sec项目。我认为差异来自示例中从 jQuery 元素列表到 Array 的转换，如果有帮助的话。它们非常接近，因此请选择更适合您的编码风格的：)

【解决方案5】：

var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})

【讨论】：

不要依赖innerHTML，您应该将“this”更改为jQuery对象并使用jQuery原生文本方法。 $(this).text()
为什么？最终 $(this).html() 将使用本机方法
在这种情况下最好使用 [] 而不是 new Array() - What’s the difference

【解决方案6】：

您可以执行以下操作。一行代码就够了

let array = $('ul>li').toArray().map(item => $(item).html());
获取感兴趣的元素
1. 生孩子
2. 从 toArray() 方法获取数组
3. 过滤掉你想要的结果

let array = $('ul>li').toArray().map(item => $(item).html());
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

【讨论】：