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

Question

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

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

所以选中的输入会显示

index = 3

如何构建这样的选择器？可能吗？还是只能显示直接嵌套在同一父项中的子项的索引？

Answer 1

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

http://jsfiddle.net/kyyh0gxe/

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

Answer 2

尝试通过传递目标元素对整个集合调用.index()，

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

DEMO

给出有效html的演示here。

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 将页面中的所有输入作为节点列表获取，然后循环遍历节点列表并验证节点列表中的哪个元素具有已检查的命题。 i 是您要搜索的索引。

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

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

Get index of elements nested in different divs

javascript

jquery

children

DEMO