将所有段落合并为一个段落

Combine all paragraphs to make a single paragraph

本文关键字：段落 一个 合并      更新时间：2023-09-26

我有一个要求，我在#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>

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

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

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

演示

仅 CSS 的替代解决方案（维护相同的 # 个 <p> 标记）

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

演示 2

只需将元素的 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>

如果你只想要来自 p 元素的文本，那么你不需要循环，因为 .text() 方法可用于获取多个元素的组合文本。

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

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

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

但是，正如您在该演示中看到的那样，使用.text()（带或不带循环）会去除段落中的任何 html 元素，因此您将丢失任何斜体或嵌入图像或其他任何内容。所以你可能想改用 .html() 方法 - 因为它不会一次返回所有元素的内容，所以你需要一个循环：

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

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

相关文章：