如何使用jquery用<marquee>标记包围每个<div>标记的内容

Question

我很好奇我将如何编写一个单行代码来获取每个div并使用jquery用marquee标签包围其内容。例如，我希望它采取

<div class="foo">Hello <div class="bar">World</div></div>

并将其转换为

<div class="foo"><marquee>Hello <div class="bar"><marquee>World</marquee></div></marquee></div>

我失败的原始尝试：

$("div").each(function() $(this).html("<marquee>"+$(this).html()+"</marquee>")});

当它到达嵌套的div标签时失败，因为当添加其marquee标签时，最外面的标签的内容被替换，从而使对内部标签的引用无效。我并不十分担心再次执行JavaScript。

你会怎么做？

Answer 1

考虑其他用户关于不使用弃用元素的建议，但出于示例目的，请考虑以下解决方案：

从jQuery docs关于 .html（）：

  

当.html（）用于设置元素的内容时，该元素中的任何内容都将被新内容完全替换。此外，在使用新内容替换这些元素之前，jQuery会从子元素中删除其他构造（如数据和事件处理程序）。

jQuery删除了子项的引用甚至事件（好吧，没有删除，它们只是再次创建为新元素，所以你不要保留以前的事件和引用）。

然后不要使用 .html（），而是创建一个新的选框元素，并附加原始 div 到它，然后将该选框附加到div：

$("div").each(function(){
    var newMarquee = $('<marquee>');
    newMarquee.append($(this).children());
    $(this).append(newMarquee);
});