Question

是否可以获取已检查输入的索引，其中所有输入都嵌套在不同的div中。例如这种情况：

<div class="parent">
  <div>
    <input></input>
    <input></input>
    <input></input>
  </div>
  <div>
    <input checked="checked"></input>
    <input></input>
    <input></input>
  </div>
</div>

所以选中的输入会显示

指数= 3

如何构建这样的选择器？可能吗？或者它是否可以显示直接嵌套在同一父级的子项的索引？

Answer 1

尝试通过传递目标元素

来调用整个集合的.index()

var inputs = $(".parent input:checkbox");
var index = inputs.index(inputs.filter(":checked")); //3

DEMO

使用有效的html进行演示here。

Answer 2

如果找到所有输入，则可以从该集合中删除索引。

http://jsfiddle.net/kyyh0gxe/

var $inputs = $('.parent input'); console.log( $inputs.index( $inputs.filter(':checked') ) );

Answer 3

您可以索引任何元素集合

var $inputs = $('input:checkbox');
$inputs.change(function(){
    alert( $inputs.index(this) );
});

或者映射已检查输入的数组：

var checked = $('input:checked').map(function(){
    return $inputs.index(this);
}).get();

Answer 4

使用getElementsByTagName将页面中的所有输入作为节点列表获取，然后循环节点列表并验证节点列表中的哪个元素具有检查的命题为真。我是你要搜索的索引。

var collection = document.getElementsByTagName("input");
for (var i = 0; i < collection.length; i++) {
  if (collection[i].checked) {
    ... do your stuff with i
  }
}

获取嵌套在不同div中的元素索引

4 个答案:

DEMO