如何使用 jquery 从输入文本数组中检测当前输入文本的索引

Posted 2023-03-05

【中文标题】如何使用 jquery 从输入文本数组中检测当前输入文本的索引

【英文标题】：How to detect current input-text's index from an array of input-text with jquery

【发布时间】：2013-06-22 12:17:45

【问题描述】：

我有一个输入文本框数组，简化如下：

<input type="text" name="quantity[3]" value="0">
<input type="text" name="quantity[6]" value="0">
<input type="text" name="quantity[7]" value="0">
<input type="text" name="quantity[11]" value="0">

这两种方法中的任何一种我都可以接受，但我什至不知道该怎么做：

当第 3 个输入框（索引为 7）发生变化时，我可以接受两个 alert()s 中的任何一个：

7（因为第3个文本框的真实索引是7） 2（因为它可能会从 0 开始计数，因此它的索引将是 2）

我不起作用的代码是：

$(document).ready(function()
    $('input[name^=quantity]').change(function()
        alert($(this).index());
    );
)

链接：http://niamco.com/cp/problem.html

预计当用户更改任何数量文本框时，文本框的val() 及其正确的index() 都会收到警报。我们看到val() 输出正确，但index() 总是返回0。

由于val() 是正确的，我们应该确保jQuery 加载良好并且可以正常工作。那么为什么index() 不应该是真的呢？

奇怪的是，正如我所研究的，val() 和 index() 都是 jQuery 功能。如果val() 是 javascript 基础，则可以接受。但是现在，一个 jquery Base 函数可以工作，另一个不行！

【问题讨论】：

.index() 获取元素的位置，我认为您需要使用简单的正则表达式来解析名称中的数字。

你的代码为我工作，以获得真正的索引。

如果 2 是可以接受的，那么您的代码正在运行 --> jsfiddle.net/V44Ty

谢谢朋友们，我会检查小提琴的。我的不是真的工作。当它应该返回 2 时，它正在返回 0。

你用什么浏览器测试@smhnaji？

【参考方案1】：

.index() 获取元素相对于其兄弟元素的当前位置。您应该使用正则表达式来获取输入名称中[ 和] 之间的数字。

改用这个：

$('input[name^=quantity]').change(function () 
    var index = $(this).prop('name').match(/\[(.*?)\]/)[1];
    console.log(index);
);

它正在运行：http://jsfiddle.net/u8HRq/1/

更新：根据您的更新，这里有一个工作小提琴：http://jsfiddle.net/qbmAU/2/

首先ids 应该是唯一的，所以我将它们更改为类并更新了change 事件的选择器。

我也有 .index() 工作：

$(this).index('.quantity')

index() 通常通过返回相对于匹配兄弟姐妹的位置来工作，这就是我和 j08691 的答案有效的原因。但是，如果元素不是同级元素，则可以将选择器作为参数传递。这将返回当前元素相对于匹配元素的index。

【讨论】：

感谢您的尝试。我已经用链接niamco.com/cp/problem.html 更新了q。如果您有时间帮我解决这个问题，我也会感谢您。

【参考方案2】：

这两者兼而有之：

 $('input[name^=quantity]').change(function () 
     console.log($(this).index(), +$(this).prop('name').match(/\d+/g));
 );

jsFiddle example

$(this).index() 是真正的索引

+$(this).prop('name').match(/\d+/g) 是属性的索引

---

更新：更新问题以显示您真正使用的代码后，这应该对您有所帮助：

$('input[name^=quantity]').change(function () 
    console.log($(this).closest('table').find('input[name^=quantity]').index($(this)), +$(this).prop('name').match(/\d+/g));
);

+$(this).prop('name').match(/\d+/g) 仍然可以从属性中获取索引

$(this).closest('table').find('input[name^=quantity]').index($(this)) 但您需要使用这种格式使用.index() 来获取输入元素的索引，因为它们不是彼此的兄弟。您需要为要与之进行比较的元素集合传递一个参数，在本例中为 $(this).closest('table').find('input[name^=quantity]')。

【讨论】：

两个问题。您应该使用 prop 来获取 name 属性，而 /\d/ 可能会错误地使 mynamewithadigit1[5] 结果为 1。

@DanielGimenez - 我会给你一个道具与属性，但由于这个答案是针对 OP 的问题而不是通用解决方案，所以 /\d/ 有效（并且站立）。

@j0861，但是您必须接受这些可能是通用名称，只是为了显示我们的利益，但在实际应用中，他可能会在名称中输入带有数字的输入。

@j08691 我应该感谢您的尝试。我已经用链接niamco.com/cp/problem.html 更新了q。如果您有时间帮助我解决问题，我也会感谢您。

啊，问题是您的示例代码没有反映涉及表的实际代码。看到这个 jsFiddle：jsfiddle.net/j08691/zeWZu/4