连接附加的字符串并删除最后一个字符答案

【问题标题】：Concatenate appended strings and remove last character连接附加的字符串并删除最后一个字符
【发布时间】：2015-09-01 17:46:30
【问题描述】：

我有一个列表，我想检索所有项目并将它们附加到段落中。我目前这样做是成功的，但它不会附加到一个字符串中（您需要检查 DOM 才能看到它），而是几个。我尝试使用 .concat() 来检索新的 p 但它返回一个错误。另外，在附加时，我添加了一个逗号来分隔项目，并且需要删除最后一个。我正在使用 .slice(0, -1) 这样做，但是因为它们都是单独的字符串，所以它不起作用。

JSFiddle

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

<p>String goes here: </p>

JS/JQuery

$(document).ready(function() {
    var item = $('ul li');
    var p = $('p');

    item.each(function() {
        itemText = $(this).text();
        p.append(itemText + ", ").slice(0,-1);
    });
});

【问题讨论】：

标签： javascript jquery string concat

【解决方案1】：

试试这个

$(document).ready(function() {
    var item = $('ul li');
    var p = $('p');
    var total = item.length;

    item.each(function(index) {
        itemText = $(this).text();
        if(index === total - 1) {
           p.append(itemText);
        } else {
           p.append(itemText + ", ");
        }
    });
});

在这里提琴http://jsfiddle.net/96t0yb6d/2/

或者上面的修改版本

$(document).ready(function() {
    var item = $('ul li');
    var p = $('p');
    var total = item.length;
    var seperator = ", ";

    item.each(function(index) {
        itemText = $(this).text();
        if(index === total - 1) {
           seperator = "";
        } 

        p.append(itemText + seperator);

    });
});

在这里拉小提琴http://jsfiddle.net/96t0yb6d/1/

【讨论】：

【解决方案2】：

它之前不起作用的原因是因为要访问您需要使用 text() 的文本，并且您需要在迭代之后执行它

p.text(p.text().slice(0, -2)); //notice -2 because you have an additional space ', '

$(document).ready(function() {
  var item = $('ul li');
  var p = $('p');

  item.each(function() {
    itemText = $(this).text();
    p.append(itemText + ", ")
  });
  p.text(p.text().slice(0, -2)); //notice -2 because you have an additional space ', '
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

<p>String goes here:</p>

但是，更好的方法是准备一个数组并在最后加入

$(document).ready(function() {
    var item = $('ul li');
    var p = $('p');
    var itemTextA = [];
    item.each(function() {
        itemTextA.push($(this).text());
    });
    p.append(itemTextA.join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

<p>String goes here: </p>

【讨论】：

【解决方案3】：

试试：

$(document).ready(function(){
    var item    = $('ul li');
    var p       = $('p');
    var myArray = []

    item.each(function(index) {
        itemText = $(this).text();
        if(!(index == item.length -1)) {
            myArray.push(itemText + ',');
        }
        else {
            myArray.push(itemText);
        }
    });

    p.append(myArray);
});

working example

【讨论】：