フォームのタグの位置

Question

フォームのタグの位置を取得することは可能ですか？ （タグ→入力、選択、ラジオなど）私は動的にフォームを作っています。ユーザーはそれをクライアントに表示することができます（タグを選択するだけでコードを書くことはありません）。そのためには、フォーム内のタグの位置が必要に応じて配置する必要があります。

例：

 
input 1 
checkbox 1 
select 1 
input 2 
radio 1 
checkbox 2 

入力2が4位にあります。 ？

私はこのようにそれを行うだろう

Answer 1

、平野JS：

var form = document.getElementById('form_id'); 
var tagType = 'input'; 
var tagId = 'input_2'; 

var l = form.children.length; 

for (var i = 0; i < l; i++) { 
    if (form.children[i].nodeName.toLowerCase() == tagType && form.children[i].id == tagId) { 
     console.log('Position:' + i); 
     break; 
    } 
} 

Answer 2

ありインデックスを取得するためにいくつかのjQueryの方法があるが、我々がダウンして途中でいくつかの選択のドロップを持っていると予想されるとして、それは文句を言わない（私たちが持っている場合は動作すべての入力タグが機能します）。私はそれを確認する下の例を与えました。そのためには、すべての要素にデータ属性を追加し、それを取得するためにjqueryを使用するのが最善の方法です。それは動的ではありませんが、それはあなたのために働くでしょう。

function test(){ 
 
    var element = document.getElementById("input2"); 
 
    alert("Basedon Input tags Index: " + ($("input").index(element)+ 1)); 
 
    alert("Based on data attrbiute index is: "+$(element).data("index")); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<input data-index="1" id="input1" placeholder="input1" type="text"/><br/><br/> 
 
<input data-index="2" id="checkbox1" placeholder="input1" type="text"/><br/><br/> 
 
<select data-index="3" id="select1"> 
 
<option> 
 
select 
 
</option> 
 
</select> 
 
<br/><br/> 
 
<input data-index="4" id="input2" placeholder="input1" type="text"/><br/><br/> 
 
<input data-index="5" id="radio1" placeholder="input1" type="text"/><br/><br/> 
 
<input data-index="6" id="checkbox2" placeholder="input1" type="text"/><br/><br/> 
 
<input data-index="7" type="button" value="getIndex" onClick="test()"/> 
 
</form>