Question

是否有可能获得标签的位置？（标签 - ＆gt;输入，选择，收音机等）我正在动态制作表格。用户可以创建一个将显示给客户端的用户（他不会编写代码而只选择标签）。为此，我需要在表单内部放置标签的位置。

示例：

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>

标签在表单中的位置

2 个答案: