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/

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

1 个答案: