javascript - 使用 jQuery 递归更改元素类型，为什么它部分起作用？

Question

源节点:

 <div class="tree">
    <div class="item"><!-- replaced OK -->
        <a href class="toggle">+</a>
        <a href class="name">Name</a>
        <div class="collapse">
            <div class="item"><!-- this wouldn't be replaced ?! --></div>
        </div>
    </div>
    <div class="item"></div><!-- replaced OK -->
</div>

我需要克隆这个节点并递归地替换每个节点 <div class="item">与 <li class="item">和 <div class="collapse">与 <ul class="collapse"> .

对于项目，这仅适用于第一级:

var $clone = $('.tree').clone(false);

$clone
    .find('.item')
    .replaceWith(function () {
        return $('<li>'+$(this).html()+'</li>');
    });

我的代码有什么问题吗？

Answer 1

您的 replace with 函数会将第一个 .item 中的 html 替换为新的 html 元素。所以 .find() 返回的数组中的另一个 .item 不存在了。你可以把它放在一个 while 循环中，所以所有的 .item 都被替换为 li:

var $items=$clone.find(".item");
while($items.length>0){
    $items.replaceWith(function () {
        return $('<li>'+$(this).html()+'</li>');
    });
    $items=$clone.find(".item");
}

JSFiddle:http://jsfiddle.net/j14f0bx9/