javascript - 用自定义标签替换每个 dom 元素的 jQuery 脚本

Question

我正在编写一个脚本，该脚本查询 div 中的所有 dom 元素并将它们替换为一些自定义标记 - 该脚本应该可以工作......但显然它没有，我不知道为什么。

这是js:

var data = {
            SPAN: function(content) {
                return '|span|' + content + '|span|'
            },
            DIV: function(content) {
                return '|div|' + content + '|div|'
            },
            P: function(content) {
                return '|p|' + content + '|p|'
            },
            H2: function(content) {
                return '|h2|' + content + '|h2|'
            },
        }

        $(document).ready(function() {

            // Iterate through each element of the dom.
            $('#result *').each(function () {
                var type = $(this)[0].tagName;

                var content = $(this).html();

                if (data[type]) var result = data[type](content);

                if (result) $(this).replaceWith(result);
            });

            console.log($('#result').html())
        });

这是我定位的 html:

<div id="result">
        <div id="wrap">
            <div class="about">
                <p>Hello, I am a web dev, <span class="italicStyle">the best!</span></p>
            </div>
            <div class="evenMore">
                <h2>Yes, I am a big heading 2.</h2>
            </div>
        </div>
    </div>

我应该看到每个 div、span、p 都被相应地替换了……为什么它不起作用？

代码仅替换了第一个 dom elm...结果如下:

|div|
Hello, I am a web dev, the best!

Yes, I am a big heading 2.

|div|

Answer 1

这是因为你从下往上开始重写了整个HTML。您看，您的第一次迭代是在 div 上进行的，您执行 $(this).replaceWith(result)。

这意味着您要更改其所有子项，因此迭代中的第二个 div 不再存在于第一个中。

你可以通过反向循环实现你想要的。表示从最后一个元素开始:

var $elements = $('#result *');
for(var i = $elements.length - 1; i >= 0; i--)
    (function() {
        var type = $(this)[0].tagName;

        var content = $(this).html();

        if (data[type]) var result = data[type](content);

        if (result) $(this).replaceWith(result);
    }).call($elements[i]);

fiddle :http://jsfiddle.net/nHjCE/