将所有段落组合成一个段落

Question

我有一个要求，我在#postrightcolumn里面得到很多<p>something</p>。我想将所有段落合并为一个段落。这里有一个例子：-

<div id="postrightcolumn">
    <p>line 1</p>
    <p>line 2</p>
</div>

我要转：

<div id="postrightcolumn">
    <p>line 1 line 2</p>
</div>

这是jQuery我正在使用但没有帮助：

<script>
    //var cleanDescription = "";
    //$('#postrightcolumn p').each(function () {
    //    var $this = $(this);
    //    cleanDescription += $this.text();
    //    console.log("Paragraph found : " + $this.text());
    //});
    //console.log("Combined Paragraph : " + cleanDescription);

    var cleanDescription = "";
    $('#postrightcolumn p').each(
        function () {
            var $this = $(this);
            cleanDescription += $this.text();
            console.log("Paragraph found : " + $this.text());
        },
        function () {
            console.log("Combined Paragraph : <p>" + cleanDescription + "</p>");
        }
    );
</script>

我需要知道如何在每个循环结束时调用一个函数，以便我可以显示组合段落。

Answer 1

只需将元素的 HTML 设置为串联段落值的值。

var cleanDescription = "";

$('#postrightcolumn p').each(function () {

  cleanDescription += $(this).text() + " ";
  
});

$('#postrightcolumn').html("<p>"+cleanDescription+"</p>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="postrightcolumn">
  <p>line 1</p>
  <p>line 2</p>
</div>

Answer 2

如果您只需要 p 个元素中的文本，则不需要循环，因为 .text() method 可用于获取多个元素的组合文本。

因此下面的代码首先获取所有段落的引用，然后将第一个段落的文本设置为所有段落的文本，然后删除除第一个以外的所有段落：

var $paras = $("#postrightcolumn p");
$paras.first().text($paras.text());
$paras.slice(1).remove();

演示：http://jsfiddle.net/bapw540b/1/

但是，正如您在该演示中看到的那样，使用 .text()（有或没有循环）会去除段落中的所有 html 元素，因此您会丢失任何斜体或嵌入图像或其他任何东西。因此，您可能想改用 .html() method - 碰巧 而不是 return 一次所有元素的内容，因此您需要一个循环：

var $paras = $("#postrightcolumn p"),
    html = "";
$paras.each(function() {
    html += $(this).html();
});
$paras.first().html(html);
$paras.slice(1).remove();

演示：http://jsfiddle.net/bapw540b/3/

Answer 3

我的创意无串联解决方案...不一定是最可读的

var $p =$('#postrightcolumn p');
$p.first().html(function(){
    return $p.map(function(){
        return $(this).html() ;
    }).get().join(' ');
}).end().filter(':gt(0)').remove();

DEMO

仅替代 CSS 解决方案（保持相同的 <p> 标签数量）

#postrightcolumn p{ margin:0; display:inline}

Demo 2

将所有段落组合成一个段落

Combine all paragraphs to make a single paragraph

html

javascript

jquery

dom