1

我在一个列表项中有一个很长的项目列表，我需要通过它并添加一个逗号和空格并显示为一个逗号分隔的项目字符串：

所以我有以下内容：

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

感谢

4

6 回答 6

5

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

一些有用的参考资料

于 2013-07-25T14:16:34.977 回答
3

您想选择有趣的元素，获取它们的文本并以字符串", "作为分隔符连接文本。

获取元素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(", ");

一些警告：

  • querySelectorAllIE < 8 不支持
  • textContentIE < 9 不支持，但可以innerText用于旧 IE
于 2013-07-25T14:15:34.823 回答
2

这里不需要 JavaScript。一些 CSS 也会这样做，并保持更语义化的文档结构：

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

（在 jsfiddle.net 上的演示）

于 2013-07-25T14:24:29.397 回答
1

您可以使用 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)));
});

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

于 2013-07-25T14:26:59.967 回答
1

希望这个小例子能给你一些工作。

$(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 示例

于 2013-07-25T14:23:56.703 回答
0

只需获取 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);
于 2013-07-25T14:18:40.007 回答