如何包裝具有複雜結構的HTML元素？

我有一個html元素，我需要用下面的結構來包裝它：如何包裝具有複雜結構的HTML元素？

<div class="someclass"> 
    <div class="somewrapper"> 
     <div class="foo"></div> 
     <div class="bar"> 
      <div class="foobar1"></div> 
      <div class="foobar2"></div> 
     </div> 
     <div class="anotherclass"></div> 
     <div class="yetanotherclass"> 
      <!-- the element to be wrapped should go here --> 
      <div class="clearfix"></div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
    <div class="anotherwrapper"> 
     <div class="clearfix"></div> 
    </div> 
    <div class="clearfix"></div> 
</div>

我的現有頁面上的HTML元素應該通過上述結構被包裹在.yetanotherclass結束。

我已經研究了jQuery的wrap()函數的所有變體，但似乎並不支持這種要求（如果我錯了，請糾正我）。

[編輯]

上面提供HTML的塊通過javascript構造和不可用的頁面上（它是，在這一點上，在可變保持）。另外，還有一些綁定到html元素的事件需要被包裝，如果我不需要重新綁定，它會很好。我想可能是append/copy/remove可能會起作用，但它看起來有點混亂。

來源

2013-11-21 Kenny Thompson

使用'$ element.before（ 'yetanotherclass .clearfix'） '？ – Krishna

這會工作，但我提供的html結構不存在於頁面上。 –

在頁面上放置html結構後，您可以立即使用上面的行。 – Krishna

你可以用.prepend()

$('.yetanotherclass').prepend('<div id="yournewelement">some html</div>');

嘗試，如果你有HTML代碼中的JavaScript，你可以將其存儲在VAR內，在前面加上像這樣的元素：

var html = '<div id="yournewelement">some html</div>'; 
$('.yetanotherclass').prepend(html);

UPDATE

嘗試用這種方式包裝您的代碼：

$('#elementtobewrapped').nextUntil('.clearfix').andSelf().wrapAll('<div class="yetanotherclass" />');

來源

2013-11-21 20:30:51

$（'。yetanotherclass'）尚不存在。我對該帖子進行了修改。謝謝！ –

更新我的答案，你需要使用一個id或一個選擇器到你想包裝的代碼@KennyThompson –

從字符串（或jQuery對象）中獲取模板，或者使用腳本標記將其作爲模板或從頁面中的容器中獲取。

總結模板html在$()

var template=/* source html*/ 
var $template=$(template)

然後插入你想要的HTML。

$template.find('.yetanotherclass').html(/* source of content*/) 
$('#someElement').append($template)

來源

2013-11-21 20:35:24 charlietfl

這聽起來更像是一個解決方案。我擔心我會失去任何綁定「內容來源」的事件 –

很可能會失去活動 – charlietfl

我的舉動將是存儲在DOM包裝模板（如隱藏字段或非標準的腳本標籤），然後當你需要使用它克隆。這樣你就不必在你的JS文件中創建這個巨大的HTML元素。

也就是說，你可以創建每個div並追加/按照正確的順序放置它們。

來源

2013-11-21 20:36:15 raorao

我能想到的唯一的事情是這樣的..

元

<button>Button</button>

腳本

$('button').replaceWith($('<div class="someclass"><div class="somewrapper">' + 
    '<div class="foo"></div><div class="bar"><div class="foobar1"></div>' + 
    '<div class="foobar2"></div></div><div class="anotherclass"></div>' + 
    '<div class="yetanotherclass">' + $('button')[0].outerHTML + '<div class="clearfix"></div></div>' + 
    '<div class="clearfix"></div></div><div class="anotherwrapper"><div class="clearfix"></div></div>' + 
    '<div class="clearfix"></div></div>'));

來源

2013-11-21 20:37:37 Spokey

如何包裝具有複雜結構的HTML元素？

回答

相關問題