在 jQuery 中获取一个列表元素内容数组

IT技术 javascript jquery
2021-02-25 05:08:45

我有这样的结构：

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

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

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

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

'"text1", "text2", "text3"'
6个回答
var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

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

var quotedCSV = '"' + optionTexts.join('", "') + '"';
我从未见过它以正常阅读顺序的任何其他方式遍历 DOM。所以虽然我无法证明它，但我敢打赌它总是从上到下遍历 DOM :)
2021-04-17 05:08:45
$.each 不是被认为性能不佳吗？如果是，有没有其他方法可以做到？
2021-04-29 05:08:45
@Daniel，你有多少列表项是一个问题？是的，还有其他方法可以做同样的事情（你可以使用 $.map() 一次性生成数组），但它们是一样的。
2021-05-03 05:08:45
jQuery 是否保证查询返回的元素的顺序？我会假设返回的顺序与 DOM 中的顺序（即 text1、text2、text3）相同，但我不知道在文档中寻找什么来查看这是否属实。
2021-05-06 05:08:45
@Shog9：我希望将字典推送到列表中，从表的每一行的两个不同列中获取值。没有更简单的方法吗？提前致谢。
2021-05-12 05:08:45

没有冗余的中间数组：

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

参见 jsfiddle演示

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

在干净的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);

kimstik 很接近，但不完全。

以下是如何以方便的单线方式进行操作：

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

这是 jQuery 的地图功能的完整文档，它非常方便：http : //api.jquery.com/jQuery.map/

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

$.map( $('li'), function (element) { return $(element).text() }).join(', ');
我的方式应该快一点..还是不？
2021-04-20 05:08:45
kimstik，根据 Benchmark.js，我的函数调用分别为 Opera 和 Chrome 执行 11,252 / 9,685 次操作/秒，而您发布的方法调用在 40 个项目的列表中执行 9,666 / 9,083 次操作/秒。我认为差异来自在您的示例中从 jQuery 元素列表到 Array 的转换，如果有帮助的话。它们非常接近，所以选择更适合您的编码风格的 :)
2021-05-05 05:08:45
我刚在这里看到这个（stackoverflow.com/questions/4856283/...）并且要重新发布，因为这是一个很好的技巧
2021-05-09 05:08:45 
var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})
为什么？最终 $(this).html() 将使用本机方法
2021-04-20 05:08:45
在这种情况下，最好使用 [] 而不是 new Array() - 有什么区别
2021-05-01 05:08:45
您应该将“this”更改为 jQuery 对象并使用 jQuery 本机文本方法，而不是依赖于 innerHTML。$(this).text()
2021-05-13 05:08:45
其它你可能感兴趣的问题
上一篇提供 JSONP 的最佳内容类型？ 下一篇CKEditor 实例已经存在