javascript foreach数组,并用逗号和空格分隔,显示为字符串
javascript foreach array and split by comma and space and display as a string
我在列表项中有一个很长的项列表,我需要遍历它,添加逗号和空格,并显示为逗号分隔的项字符串:
所以我有以下内容:
<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/
的一些有用参考
- HTML id
document.getElementById
.getElementsByTagName
- for循环
- 阵列
.join()
您想要选择感兴趣的元素,获取它们的文本,并使用字符串", "
作为分隔符来连接文本。
使用document.querySelectorAll
:获取元素
var els = document.querySelectorAll("ul > li"); // ul > li is a "CSS selector"
通过迭代返回的NodeList
:,将元素集合转换为其文本集合
var text = [];
for (var i = 0; i < els.length; ++i) {
text.push(els[i].textContent);
}
与Array.join
:一起加入
var joined = text.join(", ");
几个注意事项:
- CCD_ 8在IE<8
- CCD_ 9在IE<9,但您可以将
innerText
用于旧IE
此处不需要JavaScript。一些CSS也会这样做,并保留更语义化的文档结构:
ul {
display: block;
padding: 0;
}
li {
display: inline;
}
li:not(:last-child)::after {
content: ", ";
}
(jsfiddle.net上的演示)
希望这个小例子能给你一些借鉴。
$(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);
});
jsFiddle示例
使用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>
Jquery-
$(document).ready(function(){
var ListItem = "";
$('ul li').each(function(){
ListItem += $(this).text() + ", ";
});
$('#lstItem').text(ListItem.substring(0,(ListItem.length - 2)));
});
Try-Jquery演示
使用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();
尝试使用Javascript
只需获取LI的集合,连接它们的文本,并插入到您创建并附加到BODY:的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);
演示
编辑:现在是2021年,有更好的方法可以做到这一点
const items = document.querySelectorAll('li');
const stringifiedList = Array.from(items)
.map(item => item.textContent)
.join(', ');
const para = document.createElement('p');
para.textContent = stringifiedList;
document.body.appendChild(para);
相关文章:
- 选择带有空格分隔单词的元素
- 匹配由单个空格分隔的单词,单词的开头或结尾不能有空格
- 如何在php和javascript中使用regex检测空格分隔词(在全文搜索查询中)
- 从空格分隔的文本创建和实现数组:AngularJS
- 在 Javascript 中将对象连接为空格分隔字符串的最简单方法是什么?
- Regex从空格分隔的字符串中删除连续重复项
- 在自定义标记中查找包含特定值的元素,并带有空格分隔的值
- 将空格分隔的类列表转换为 Jquery 选择器的有效方法
- 在输入中需要两个用空格分隔的单词
- Javascript RegExp :用逗号分隔,过滤多余的空格
- 正则表达式替换以空格分隔的整数
- Javascript如何反转空格分隔的字符串
- Javascript/REGEX:删除字符串中以特定字母开头的特定文本(单词),单词之间用空格分隔
- 从字符串中删除空格,并在分隔行中写入文本
- 用空格分隔字符串,但不能在括号内
- 用空格和短划线分隔字符串
- 用空格分隔的字符串样式
- javascript foreach数组,并用逗号和空格分隔,显示为字符串
- 允许逗号和空格分隔的数字列表的正则表达式
- 用空格分隔的Javascript,但不能用引号分隔