Javascript 将所有段落合并成一个段落

我有一个要求，我在

#postrightcolumn

中得到了很多

东西。我想把所有段落合并成一个段落。这里有一个例子：-

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


第1行

第2行


我想把它转过来：

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


第1行第2行


下面是我正在使用的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>


//var cleansdescription=“”；
//$（'#postrightcolumn p'）。每个（函数（）{
//var$this=$（this）；
//cleanDescription+=$this.text（）；
//log（“找到的段落：+$this.text（））；
//});
//console.log（“组合段落：”+cleanDescription）；
var cleansdescription=“”；
$（“#postrightcolumn p”）。每个(
函数（）{
var$this=$（this）；
cleanDescription+=$this.text（）；
log（“找到的段落：+$this.text（））；
},
函数（）{
console.log（“组合段落：”+cleansdescription+“
”）；
}
);

我需要知道如何在每个循环结束时调用函数，以便显示组合段落。
只需将元素的HTML设置为连接段落值的值


var cleansdescription=“”；
$（'#postrightcolumn p'）。每个（函数（）{
cleanDescription+=$（this）.text（）+“”；
});
$（“#postrightcolumn'）.html（“”+cleanDescription+”
”）

第1行

第2行

如果只需要p元素中的文本，则不需要循环，因为可以使用循环获取多个元素的组合文本

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

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

演示：

但是，正如您在该演示中所看到的，使用
.text（）
（带或不带循环）会删除段落中的任何html元素，因此会丢失任何斜体或嵌入图像或其他内容。因此，您可能希望改用-它不会同时返回所有元素的内容，因此需要一个循环：

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

演示：
我的创意无连接解决方案……不一定是最具可读性的解决方案

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


仅CSS替代解决方案（维护相同的
标记）

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

您注释掉的代码有什么问题？这似乎可以满足你的要求，原因是什么？如果是因为间距，可以简单地用css删除边距，这样文本就会出现joined@charlietfl是的，我们仍然在使用JS吗？不需要JS，简单的css规则
#postrightcolumn p{margin:0；padding:0}
@charlietfl我还有两行？在`的内容中，

或
或
img
会失败。一开始对我来说是有意义的though@charlietfl-是的，它基本上会删除所有其他元素，只保留文本，但问题中的原始代码使用的是
.text（）
方法对每个段落元素执行相同的操作。样本中只有段落…我还有内#postrightcolumn，我只想选择所有并合并。OK@AVatsa-我的答案的新版本在不影响h3或其他元素的情况下更改段落。如果您使用
.text（）
，您将丢失段落中的元素（如
或
），但保留它们的文本；如果在循环中使用
.html（）
，则会将元素保留在段落中。两种方式都显示出来。您可能希望在每个（原始）段落的内容后添加一个空格：我仍然在#postrightcolumn检查中看到相同的两个。这把小提琴看起来很接近修复。dom显示了
第1行第2行，您在说什么？CSS代码不是解决问题的方法。它不会组合
p
元素，它只会影响它们的渲染。@JukkaK.Korpela我完全理解，比特意图还不完全清楚，是吗？如果问题仅仅是间隔，它将以最小的开销完成任务，或者说它确实不清楚目的是什么，但是当它实际上没有解决或者甚至没有解决实际提出的问题时，你不应该把它作为解决方案（甚至是替代方案）来提出。这可能是一个评论，但称之为解决方案是误导性的。@charlietfl谢谢。我用的是CSS方式，它很酷，我试过JS方式，但当我在同一页上有多个#postrightcolumn时，它就起作用了。它合并了#postrightcolumn的所有实例。