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

Question

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

所以我有以下内容:

 <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 新手，所以任何帮助都会很棒。

谢谢

Answer 1

在代码中使用唯一 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/

一些有用的引用

• HTML id's
• document.getElementById
• .getElementsByTagName
• for loops
• arrays
• .join()