jquery - jQueryを使用して、すべての属性とデータを保持しながら、あるタグを別のタグに置き換えます

Question

これは、 jQueryを使用して1つのタグを別のタグに置き換えるのと似ていますが、html内でタグを別のタグに置き換えることを検討していますが、オブジェクトの属性と定義済みのカスタムデータ（$ .dataを介して設定）を保持します。これを達成する方法はありますか？

Answer 1

属性のコピーはそれほど難しくありません。この回答は、ノードに関連付けられているデータとイベントを保持することに焦点を当てています。

を記述する$('#myid').data('msg', 'hello world')と、内部的に jQuery は DOM 要素に特別なプロパティを作成しますjQuery.expando(これは、数字で始まり"jQuery"、その後に一連の数字が続く単なる文字列です)。そのプロパティの値はjQuery.cache、カスタム データとイベント ハンドラーが格納される配列へのキーを保持します。

// lets assume you want to replace node a with node b
// we need the DOM elements for this
var nodea = ..., nodeb = ...;

// jQuery data references are stored in a special property of the node
var key = nodea[jQuery.expando], 
cache = jQuery.cache[key];

// perform replacement
$(nodea).replaceWith(nodeb);

if (cache) {
  // restore data
  jQuery.cache[key] = cache;
  nodeb[jQuery.expando] = key;
}

デモ

ただし、これは自己責任で使用する必要があります。内部をいじることは、多くの場合、最善の解決策ではありません。