jquery - 如何使用 jquery 将同时的 html pre 标签合并为一个 pre 标签？

Question

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

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

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

我想要做的是将这两个 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);
    });
});

小提琴

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

Answer 2

这种方法怎么样： -

获取相邻pre的 s 对，迭代，用 self 获取前一个并获取它们的内容，打开它们以移除pre包装器（对）并用新的新pre标签包装它们（对）。

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

演示

Answer 3

工作 jsFiddle 演示

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

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