如何使用jquery包圍每個內容 <div> 用一個標簽 <marquee> 標簽

Question

我很好奇我將如何編寫單行代碼來使用每個div，並使用jquery將其內容用選取框標記包圍。 例如，我希望它采取

<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標簽時，它失敗了，因為添加了字幕標簽后，最外面的標簽的內容被替換了，從而無效了對內部標簽的引用。 我並不擔心再次執行JavaScript。

你會怎么做？

Answer 1

考慮來自其他用戶的關於不使用不推薦使用的元素的建議，但出於示例目的，以下解決方案：

從有關.html（）的jQuery文檔中 ：

使用.html（）設置元素的內容時，該元素中的所有內容都將被新內容完全替換。 此外，在用新內容替換那些元素之前，jQuery從子元素中刪除了其他構造，例如數據和事件處理程序。

jQuery會刪除子項的引用甚至事件（嗯，不會刪除，它們會再次被創建為新元素，因此您不會保留以前的事件和引用）。

然后，不要使用.html（） ，而是創建一個新的marquee元素並將原始div的子代添加到該元素，然后將該marquee附加到div：

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