jQuery脚本用自定义标记替换每个dom元素

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]);

小提琴:http://jsfiddle.net/nHjCE/