javascript foreach 数组并用逗号和空格分隔并显示为字符串

标签 javascript html arrays string foreach

我在列表项中有一个很长的项目列表,我需要对其进行遍历并添加逗号和空格并显示为逗号分隔的项目字符串:

所以我有以下内容:

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>

我需要显示如下:

项目 1、项目 2、项目 3、项目 4 等

 <p>Item 1, Item 2, Item 3, Item 4, etc</p> 

我是 javaScript 新手,所以任何帮助都会很棒。

谢谢

最佳答案

在代码中使用唯一 ID 可以使此类工作变得更加简单。

<ul id="myUL">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>
<p id="myPara"></p>

JavaScript 看起来像这样

//Grab your ul element by id and then all the li tags within it.
var myArr = document.getElementById("myUL").getElementsByTagName("li");
//Grab your paragraph you wish to populate
var para = document.getElementById("myPara");
//Specify an output array
var output = [];

//Loop over your li's and grab the html content
for(var i=0; i<myArr.length; i++){
    output.push(myArr[i].innerHTML);
}

//Set the paragraph value by joining the outputs together 
para.innerHTML = output.join(", ");

这是一个工作的 jsFiddle - http://jsfiddle.net/GBdTM/

一些有用的引用

关于javascript foreach 数组并用逗号和空格分隔并显示为字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17860395/

相关文章:

javascript - 如何在 JavaScript 中将值传递给对象?

javascript - 有没有办法在 twitter streaming api 过滤器上进行 AND 操作?

javascript - 为什么重新加载在ajax中不可见,但在控制台中可见?

javascript - 如何在 react 中的一组元素中识别单个 div 元素?

python - 重新调整 3d numpy 数组中的值

c - 在 C 中将字符与表指针交换

javascript - RxJs 处理异常而不终止

javascript - 如何添加和删除双列表框中的所有选项?

javascript - 从 JavaScript 数组打印值

javascript - 表单元素上的 $watch