javascript 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
等

我需要将其显示为以下内容：

 <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> 

项目1、项目2、项目3、项目4等
 <p>Item 1, Item 2, Item 3, Item 4, etc</p> 

我是javaScript新手，所以任何帮助都会很好

---

谢谢

您想要选择感兴趣的元素，获取它们的文本，并将字符串

“，”

作为分隔符连接文本

使用以下工具获取元素：

通过迭代返回的以下内容，将元素集合转换为其文本集合：

有几点需要注意：

• IE<8中不支持

  querySelectorAll

• IE<9不支持

  textContent

  ，但您可以对旧IE使用

  innerText

---

您希望选择感兴趣的元素，获取它们的文本，并使用字符串

“，”

作为分隔符连接文本

使用以下工具获取元素：

通过迭代返回的以下内容，将元素集合转换为其文本集合：

有几点需要注意：

• IE<8中不支持

  querySelectorAll

• IE<9不支持

  textContent

  ，但您可以对旧IE使用

  innerText

---

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

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

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(", ");

//按id抓取ul元素，然后抓取其中的所有li标记。
var myArr=document.getElementById（“myUL”）.getElementsByTagName（“li”）；
//抓取您希望填充的段落
var para=document.getElementById（“myPara”）；
//指定输出数组
var输出=[]；
//在li上循环并获取html内容
对于（var i=0；i，在代码中使用惟一的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>


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



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(", ");

//按id抓取ul元素，然后抓取其中的所有li标记。
var myArr=document.getElementById（“myUL”）.getElementsByTagName（“li”）；
//抓取您希望填充的段落
var para=document.getElementById（“myPara”）；
//指定输出数组
var输出=[]；
//在li上循环并获取html内容
对于（var i=0；i，只需获取LIs的集合，连接它们的文本，并插入到您创建并附加到正文中的p中：

var items = document.getElementsByTagName('li'),
    count = items.length,
    para = document.createElement('p'),
    str = items[0].innerHTML,
    i;

for (i = 1; i < count; i += 1) {
    str += ', ' + items[i].innerHTML;
}

para.innerHTML = str;
document.body.appendChild(para);

var items=document.getElementsByTagName（'li'），
计数=项目长度，
para=document.createElement（'p'），
str=items[0]。innerHTML，
我
对于（i=1；i

只需获取LIs集合，连接它们的文本，然后插入到您创建并附加到正文的p中：

var items = document.getElementsByTagName('li'),
    count = items.length,
    para = document.createElement('p'),
    str = items[0].innerHTML,
    i;

for (i = 1; i < count; i += 1) {
    str += ', ' + items[i].innerHTML;
}

para.innerHTML = str;
document.body.appendChild(para);

var items=document.getElementsByTagName（'li'），
计数=项目长度，
para=document.createElement（'p'），
str=items[0]。innerHTML，
我
对于（i=1；i

希望这个小例子能给你一些有用的东西

$(document).ready(function () {
        var str = '';
        $('li').each(function () {
            str += $(this).text() + ', ';
        });

        //Remove the last two character
        str = str.slice(0, -2);

        //assign the string to the <p>
        $('p').text(str);
    });

$（文档）.ready（函数（）{
var-str=''；
$（'li'）。每个（函数（）{
str+=$（this.text（）+'，'；
});
//删除最后两个字符
str=str.slice（0，-2）；
//将字符串分配给
$（'p'）。文本（str）；
});

希望这个小例子能给你一些有用的东西

$(document).ready(function () {
        var str = '';
        $('li').each(function () {
            str += $(this).text() + ', ';
        });

        //Remove the last two character
        str = str.slice(0, -2);

        //assign the string to the <p>
        $('p').text(str);
    });

$（文档）.ready（函数（）{
var-str=''；
$（'li'）。每个（函数（）{
str+=$（this.text（）+'，'；
});
//删除最后两个字符
str=str.slice（0，-2）；
//将字符串分配给
$（'p'）。文本（str）；
});

此处不需要JavaScript。一些CSS也可以这样做，并保留更具语义的文档结构：

ul {
    display: block;
    padding: 0;
}
li {
    display: inline;
}
li:not(:last-child)::after {
    content: ", ";
}

（）
此处不需要JavaScript。一些CSS也可以这样做，并保留更具语义的文档结构：

ul {
    display: block;
    padding: 0;
}
li {
    display: inline;
}
li:not(:last-child)::after {
    content: ", ";
}

（）
您可以使用Jquery轻松获得此信息-

Html-

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>
<span id="lstItem"></span>


使用Javascript的解决方案-

var listli = document.getElementsByTagName("li");
var lstItem = [];
for(var i=0; i<listli.length; i++){
    lstItem.push(listli[i].innerHTML);
}
 var showlist = document.getElementById("lstItem");
 showlist.innerText = lstItem.join();

var listli=document.getElementsByTagName（“li”）；
var lstItem=[]；
对于（var i=0；i，您可以使用Jquery-

Html-

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>
<span id="lstItem"></span>


使用Javascript的解决方案-

var listli = document.getElementsByTagName("li");
var lstItem = [];
for(var i=0; i<listli.length; i++){
    lstItem.push(listli[i].innerHTML);
}
 var showlist = document.getElementById("lstItem");
 showlist.innerText = lstItem.join();

var listli=document.getElementsByTagName（“li”）；
var lstItem=[]；
对于（var i=0；i请向我们展示您编写的代码，我们很乐意提供帮助。您的意思是横穿dom？还是字符串格式的html代码？请提供更多信息。此外，您是否在使用jquery？查看
文档.getElementsByTagName（）
和
.innerHTML
（或
.textContent
和
.innerText
），以及循环的
。然后
document.createElement（）
和
appendChild（）
（如果需要）这里有一个选项：这看起来很像家庭作业（：请向我们展示您编写的代码，我们很乐意提供帮助。您的意思是横穿dom？还是字符串格式的html代码？请提供更多信息。此外，您是否使用jquery？查看
document.getElementsByTagName（）
和
.innerHTML
（或
.textContent
和
.innerText
），以及
循环的
。然后
document.createElement（）
和
appendChild（）
（如果需要）这里有一个操作