获取表单元素的索引

Getting the index of a form element

本文关键字：索引 元素 表单 获取      更新时间：2023-09-26

>我有多个输入框，属性name="user[]"

当单击特定输入的按钮时，我需要找出单击user的索引。

我已经尝试了一些方法，例如.index()，.attr('name")，但我找不到索引。

这怎么可能？

<div>
    <input type="hidden" name="user[]"> <!-- index 0 -->
    <button class="btn btn-primary"> 
</div>
<div>
    <input type="hidden" name="user[]"> <!-- index 1 -->
    <button class="btn btn-primary">
</div>
<div>
    <input type="hidden" name="user[]"> <!-- index 2 -->
    <button class="btn btn-primary">
</div>
...

可以通过单击按钮添加新的div。这用于用户邀请表单，因此没有 ID。

我需要这样的东西

$('button').on('click', function() {
    var index = $(this).parent().children('input').getTheIndex();
    // where the index is defined by the use of [] 
});

jQuery的.index()查找给定集合中元素的索引。

因此，要在name="user[]"输入中搜索，您首先需要找到所有输入：

var index = $(':text[name="user[]"]')...;

然后，您可以确定其中当前输入的.index()：

var index = ...index(currentInput);

例：

$('button').on('click', function() {
    var allUsers = $('[name="user[]"]');
    var user = $(this).siblings('[name="user[]"]');
    var index = allUsers.index(user.get(0)); // get the native DOM node for the search
    console.log(index); // 0, 1, ...
    console.log(user.get(0) === allUsers.get(index)); // true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="hidden" name="user[]"> <!-- index 0 -->
    <button class="btn btn-primary">Test</button>
</div>
<div>
    <input type="hidden" name="user[]"> <!-- index 1 -->
    <button class="btn btn-primary">Test</button>
</div>
<div>
    <input type="hidden" name="user[]"> <!-- index 2 -->
    <button class="btn btn-primary">Test</button>
</div>

如果每个按钮都与特定的隐藏元素相关，这将执行此操作： 

  var $users = $("input[type=hidden]");
  var $buttons = $(".btn-primary");
  $buttons.on("click", function(){
    // Get the index of the button, since it will match the
    // index of the input
    alert("Button index was: " + $buttons.index(this));
    // Get the index of the hidden element that comes just before the 
    // button that was clicked:
    alert("Hidden index was: " + $users.index(this.previousElementSibling));    
  });

小提琴：https://jsfiddle.net/cvnwr89p/5/

顺便说一下，您需要关闭<button>元素。

我认为您需要将该输入框的属性设置为类似于data-user-id=42 data以便您可以查找checked框并获取它们的data属性。如果你想要类似"所有表单元素中的索引"的东西，你需要像document.getElementById("form").elements这样的东西，你可以在其中查找你的输入......

你可以

这样做：

$('.btn-primary').on('click', function() {
    console.log($('.btn-primary').index($(this)))
});
相关文章：