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

Question

我有一个列表,我想要检索所有项目并将它们附加到段落.我目前成功地这样做但它没有附加到一个字符串中(你需要检查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);
    });
});

Answer 1

它之前没有工作的原因是因为要访问您需要使用的文本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>