根据给定的标准重新排列 DOM 元素

Rearrange DOM elements according to given standard

本文关键字：排列 元素 DOM 新排列 标准      更新时间：2023-09-26

我会尝试描述这个问题：

我正在使用内容可编辑来编辑 DIV 中的文本。我需要在该 DIV 中拥有的元素标准是：

段：

<p style="someStyles"><span style="someStyles">TEXT GOES HERE</span></p>

空行：

<p style="someStyles"><span style="someStyles"><br></span></p>

由于某些用户文本操作，例如复制/粘贴标准在该 DIV 中被搞砸了，如下所示（例如情况）： 

<span style="someStyles">
    <p style="someStyles">SOME TEXT HERE</p>
    <p style="someStyles">SOME TEXT HERE</p>
</span>
我正在寻找一种解决方案，该

解决方案将处理混乱的文本元素并将其重新排列为我上面写的给定标准，有什么建议吗？

重新排列元素后，它应该看起来像这样：

<p style="someStyles">
    <span style="someStyles">SOME TEXT HERE</span>
    <span style="someStyles">SOME TEXT HERE</span>
</p>

P.S - 我想在键入时对 keyup 事件进行重新排列功能，并且仅适用于插入符号所在的整个 p 元素。

正如我在评论中所说，我看不到对此的一般解决方案，但是您的具体示例可以像这样解决。您可以基于此轻松进行其他几项转换。

replace函数就是基于这个答案。

// this converts an element to another tag
function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var i, replacement = $('<' + that + '>').html($(this).html());
        for (i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
}
function convert() {
    // get SPANs that has Ps inside
    var $spans = $("#content span").has("p");
    $spans.each(function () {
        // change children Ps into SPANs
        replace($(this).children("p"), "span");
        // change parent SPAN into P
        replace(this, "p");        
    });
}

这是一个测试jsfiddle。

相关文章：