クローンフォーム（javascript）ですべてのIDの名前を変更する方法は？

Question

I持って（フォームが複数回表示されますjqueryの携帯電話に設計されており、htmlページ、クローン化された）この方法でクローン化された形式（commonStuff）：

var commonClone = commonStuff.cloneNode(true); 

と、この機能

function renameNodes(node) { 
    var i; 
    if (node.length) { 
     for (i = 0; i < node.length; i += 1) { 
      renameNodes(node[i]); 
     } 
    } else { 
     // rename any form-related elements 
     if (typeof node.form !== 'undefined') { 
      node.id = currentPrefix + '_' + node.id; 
      node.name = currentPrefix + '_' + node.name; 

     // This assumes that form elements do not have child form elements! 
     } else if (node.children) { 
      renameNodes(node.children); 
     } 
    } 
} 

これはformの任意の要素のidと名前に接頭辞 'form1_'、 'form_2'（currentPrefix）を追加し、commonCloneに適用されます（そしてその子に再帰的に適用されます）。

renameNodes(commonClone); 

それは

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> 
     <label for="foo" class="ui-input-text">Age:</label> 
     <input type="text" name="age" id="age" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"> 
    </div> 

のようなテキスト入力の場合には完全に動作しますが、それはfieldcontain 'と'のような外側のdiv要素に名前変更を適用する

<div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup" data-type="horizontal"> 
      <legend>Address:</legend> 
       <input type="radio" name="radio-address" id="radio-address_female" value="1" checked="checked" /> 
       <label for="radio-address_female">Address 1</label> 

       <input type="radio" name="radio-address" id="radio-address_male" value="2" /> 
       <label for="radio-address_male">Address 2</label> 
     </fieldset> 
    </div> 

のようにラジオボタンで失敗します対照群'。それらの2つのdivを削除すると機能しますが、グラフィック効果は受け入れられません...

これまでのところ、私は問題は最後の 'else if'ブロックで兄弟を気にしませんが、私はこれを修正する方法は本当に分かりません。何か案が？

編集：このコードは本当に、これははるかにエレガントからである。この答えHow to create a tabbed html form with a common div

Answer 1

から来ているが、解決策、とにかく。どのノードでも、これは手動で入力とラベルを検索し、ラベルの場合はID、名前、および 'for'属性を変更します。

function renameNodes(node) { 
    var i; 
    if (node.length) { 
     for (i = 0; i < node.length; i += 1) { 
      renameNodes(node[i]); 
     } 
    } else { 
     // rename any form-related elements 
     if (typeof node.form !== 'undefined') { 
      node.id = currentPrefix + '_' + node.id; 
      node.name = currentPrefix + '_' + node.name; 

      var inputs = node.getElementsByTagName('input'); 
      for (i = 0; i < inputs.length; ++i) { 
       inputs[i].id = currentPrefix + '_' + inputs[i].id; 
       inputs[i].name = currentPrefix + '_' + inputs[i].name; 
      } 
      var labels = node.getElementsByTagName('label'); 
      for (i = 0; i < labels.length; ++i) { 
       labels[i].setAttribute('for', currentPrefix + '_' + labels[i].getAttribute("for")); 
      } 
     } else if (node.children) { 
      renameNodes(node.children); 
     } 
    } 
} 

Answer 2

jQueryモバイルを使用する場合は、jQueryを使用できます。 私はこのコードが正しい方向にあなたを指すことを願っています：

var i = 0; 
$("form").each(function() { 
    $(this).find("input, select").each(function() { 
    $(this).attr("id", "form" + i + "_" + $(this).attr("id")); 
    $(this).attr("name", "form" + i + "_" + $(this).attr("name")); 
    }); 
    $(this).find("label").each(function() { 
    $(this).attr("for", "form" + i + "_" + $(this).attr("for")); 
    }); 
    i++; 
}); 

EDIT：

は、私はあなたの現在のアプローチは、ラベルで失敗し理解しています。あなたの入力要素を labelタグの中に入れてください。その場合、 for属性は必要ありません。これは、ドキュメントに従ったものである： http://api.jquerymobile.com/checkboxradio/ はこの考えてみましょう：

HTML

<form> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <legend>Address:</legend> 
     <label><input type="radio" name="radio-address" id="radio-address_female" value="1" checked="checked" />Address 1</label> 
     <label><input type="radio" name="radio-address" id="radio-address_male" value="2" />Address 2</label> 
    </fieldset> 
    </div> 
    <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> 
    <label><input type="text" name="age" id="age" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">Age:</label> 
    </div> 
</form> 

jQueryの

var i = 0, currentPrefix = "form"; 
$("form").each(function() { 
    $(this).find("input, select").each(function() { 
    $(this).attr("id", currentPrefix + i + "_" + $(this).attr("id")); 
    $(this).attr("name", currentPrefix + i + "_" + $(this).attr("name")); 
    }); 
    i++; 
}); 

ワーキンフィドル：https://jsfiddle.net/EliteSystemer/8sx6rnwo/