Question

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

<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 - 它发生了而不是一次性返回所有元素的内容，所以你需要一个循环：

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

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

3 个答案: