Question

我对<pre>标签有疑问。我的HTML编辑器将每行代码包装成单独的<pre>标记。例如：

<pre>
    var abc = "apple";
</pre>

<pre>
    var def = "ball";
</pre>

我想要做的是将这两个预标签包装成一个：

<pre>
    var abc = "apple";
    var def = "ball";
</pre>

包装必须是连续的<pre>标记，因为我在这些<pre>标记的块之间有其他文字。

Answer 1

$(function () {
    var removed = []
    $("pre").each(function () {
        if (removed.indexOf(this) != -1) {
            return;
        }
        var contents = $(this).html();
        var $nextpre;
        while (($nextpre = $(this).next("pre")) && $nextpre.length > 0) {
            contents += $nextpre.html();
            removed.push($nextpre[0]);
            $nextpre.remove();
        }
        $(this).html(contents);
    });
});

FIDDLE

这非常接近。它存在.next()跳过文本节点的问题，因此这会合并仅由文本分隔的<pre>块，而不是其他HTML元素。

Answer 2

这种方法怎么样： -

获取相邻的pre对，迭代，获取前面的self并获取其内容，解包它们以移除pre包装器（对）并将所有这些（对）包装起来全新的pre标签。

$('pre').next('pre').each(function () {
   $(this)
          .prev('pre')
          .andSelf()
          .contents()
          .unwrap()
          .wrapAll('<pre/>');
});

Demo

Answer 3

Working jsFiddle Demo

$(function () {
    var $pre = $('pre + pre');
    $pre.each(function () {
        var $elem = $(this);
        var $before = $elem.prev('pre');

        $elem.contents().unwrap().appendTo($before);
    });
});

如何使用jquery将同步的html pre标签组合成一个pre标签？

3 个答案:

Demo