I am curious about how I would go about writing a one-liner to take every div and surround its contents with marquee tags using jquery. For example I would like it to take
我很好奇我将如何编写一个单行代码来获取每个div并使用jquery用marquee标签包围其内容。例如,我希望它采取
<div class="foo">Hello <div class="bar">World</div></div>
and turn it into
把它变成
<div class="foo"><marquee>Hello <div class="bar"><marquee>World</marquee></div></marquee></div>
My original attempt that failed:
我失败的原始尝试:
$("div").each(function() $(this).html("<marquee>"+$(this).html()+"</marquee>")});
It failed when it reached nested div tags because the outermost tag's contents was replaced when its marquee tag was added thus invalidating references to the inner tags. I'm not super worried about executing JavaScript again .
当它到达嵌套的div标签时失败,因为当添加其marquee标签时,最外面的标签的内容被替换,从而使对内部标签的引用无效。我并不十分担心再次执行JavaScript。
How would you do this?
你会怎么做?
1 个解决方案
#1
2
Consider the recommendations from other users about not using deprecated elements, but for exemplification purposes, the following solution:
考虑其他用户关于不使用弃用元素的建议,但出于示例目的,请考虑以下解决方案:
From the jQuery docs about .html():
来自关于.html()的jQuery文档:
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
当.html()用于设置元素的内容时,该元素中的任何内容都将被新内容完全替换。此外,在使用新内容替换这些元素之前,jQuery会从子元素中删除其他构造(如数据和事件处理程序)。
The references and even events of children are removed by jQuery (well, not removed, they are just being created as new elements again, so you don't keep the previous events and references).
jQuery删除了子项的引用甚至事件(好吧,没有删除,它们只是再次创建为新元素,所以你不保留以前的事件和引用)。
Don't use .html() then, and instead create a new marquee element and append the children of the original div to it, then append that marquee to the div:
不要使用.html()然后,而是创建一个新的marquee元素并将原始div的子项追加到它,然后将该选框附加到div:
$("div").each(function(){
var newMarquee = $('<marquee>');
newMarquee.append($(this).children());
$(this).append(newMarquee);
});
#1
2
Consider the recommendations from other users about not using deprecated elements, but for exemplification purposes, the following solution:
考虑其他用户关于不使用弃用元素的建议,但出于示例目的,请考虑以下解决方案:
From the jQuery docs about .html():
来自关于.html()的jQuery文档:
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
当.html()用于设置元素的内容时,该元素中的任何内容都将被新内容完全替换。此外,在使用新内容替换这些元素之前,jQuery会从子元素中删除其他构造(如数据和事件处理程序)。
The references and even events of children are removed by jQuery (well, not removed, they are just being created as new elements again, so you don't keep the previous events and references).
jQuery删除了子项的引用甚至事件(好吧,没有删除,它们只是再次创建为新元素,所以你不保留以前的事件和引用)。
Don't use .html() then, and instead create a new marquee element and append the children of the original div to it, then append that marquee to the div:
不要使用.html()然后,而是创建一个新的marquee元素并将原始div的子项追加到它,然后将该选框附加到div:
$("div").each(function(){
var newMarquee = $('<marquee>');
newMarquee.append($(this).children());
$(this).append(newMarquee);
});