jQuery的重命名所有屬性

Question

可能重複：
How can I change HTML attribute names with jQuery?

我有基於先前選擇的問題，不同的問題提供一個大/複雜的形式。

嘗試保持這個有點組織我有幾個重複的輸入具有相同的名稱。這會導致在頁面下方輸入即使它們被隱藏也會覆蓋可見輸入的問題。

爲了防止出現這種情況，我已將所有隱藏的輸入設置爲data-name而不是name屬性。

問題 如何更改屬性名稱。 E.g：

<input data-name="phone" value="" /> 
<input data-name="email" value="" /> 

To 
<input name="phone" value="" /> 
<input name="email" value="" /> 

Answer 1

鑑於上述HTML標記，我建議：

$('input').each(
    function(i,el){ 
     var data = $(el).data(); 
     for (datum in data) { 
      if (!el[datum]) { 
       el[datum] = data[datum]; 
       el.removeAttribute('data-' + datum); 
      } 
     } 
    });​ 

JS Fiddle demo。

這使用jQuery data()方法來創建一個數據對象（如果存在的話），並附加到當前正在由each()方法迭代的jQuery對象。

有效地，在上面的例子中，檢查if，目前的元件不已經具有相同的名稱的屬性（這樣name不會如果它已經存在覆蓋），如果它不和，存在，創建該屬性/屬性。

要明確覆蓋預先存在的屬性：

$('input').each(
    function(i, el) { 
     var data = $(el).data(); 
     for (datum in data) { 
      el[datum] = data[datum]; 
      el.removeAttribute('data-' + datum); 
     } 
    });​ 

JS Fiddle demo。

參考文獻：

• data()。
• each()。
• removeAttribute()。

Answer 2

$('input[data-name]').each(function(){ 
    $(this).attr('name', $(this).attr('data-name')); //does the switch 
    $(this).removeAttr('data-name'); //clears out the old one if you need to 
});