一個標籤，它尚未在DOM

我有一個JavaScript函數，合併的HTML的所有屬性剪斷這是尚未在DOM，例如一個標籤，它尚未在DOM

<div class="one two"><input /><span name="abc">Text</span></div>

與DOM節點/標籤

<div id="aaa" class="another"></div>

結果是：

<div id="aaa" class="one two another"><input /><span name="abc">Text</span></div>

我想提高這個功能。

直到現在我將執行以下操作：

它以第一源標籤的類屬性與目標將其合併：

classes = $(source).first().attr("class"); 
this.addClass(classes);

這將源的子標籤到目標：

this.append($(source).first().children());

現在我想添加這個功能：

Take all attribute (not "class") of the first source tag and add it to the 
    first target tag (overwrite if it exists).

的問題是，我不能拿「屬性」，因爲剪斷的源尚未在DOM。我有到現在的解決方案是不是很漂亮：對於每一個非常普遍的屬性我有一個額外的行：

tabindex = $(source).first().attr("tabIndex"); 
this.attr("tabIndex", tabindex); 

wrap = $(source).first().attr("wrap"); 
this.attr("wrap", wrap);

有任何人的想法如何獲得這樣的HTML代碼段（第一標籤）的所有屬性？

更新：

當然，我可以交換源和目標：

讀取目標DOM標籤的所有屬性與「屬性」。
將這些屬性添加到片段的第一個標記中，該標記尚不在DOM中。
用html代碼替換DOM標籤。

但是，有沒有更優雅的解決方案？

來源

2012-11-14 Wolfgang Adamec

只是一個通知：如果你添加了一些DOM和刪除它立即它不是在渲染瀏覽器，它很快。 –

爲什麼不用「display：none」添加元素。該元素不會顯示在頁面上，您可以訪問隱藏元素的所有屬性。當你對元素的操作感到滿意時，你只需顯示（）它。 – Lowkase

您應該能夠從實際DOM對象訪問它們很容易閱讀片段屬性：

var $target = $('#aaa'); 
$source = $('<div class="one two"><input /><span name="abc">Text</span></div>'); 

// iterate over attributes of $source 
// we use $source.get(0) to get the DOM fragment itself 
for (var i = 0, attributes = $source.get(0).attributes, item; item = attributes[i]; ++i) { 
    if (item.name == 'class') { 
     // special case for class 
     $target.addClass(item.nodeValue); 
    } else { 
     // otherwise overwrite attribute of target with source 
     $target.attr(item.name, item.nodeValue); 
    } 
} 
// finally append the children from source 
$target.append($source.children());

來源

2012-11-14 15:02:45

謝謝！我認爲「屬性」不適用於不在DOM中的片段。所以我學到了非常重要的東西。 –

一個標籤，它尚未在DOM

回答

相關問題