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

How to detect current input-text's index from an array of input-text with jquery

提问by Mohammad Naji

I have an array of input text boxes simplified as bellow:

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

<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">

Either of the two ways is acceptable for me, but I don't know how to do even one of them:

这两种方式中的任何一种对我来说都是可以接受的，但我什至不知道如何做其中一种：

When the 3rd input box (with has index 7) is changed, either of the two alert()s is acceptable for me:

当第三个输入框（具有索引 7）更改时，两个alert()s 中的任何一个对我来说都是可以接受的：

• 7 (because the real index of the 3rd text box is 7)
• 2 (because probably it will be counted from 0 and thus its index will be 2)

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

My code that doesn't work is:

我不起作用的代码是：

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

Link: http://niamco.com/cp/problem.html

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

It is expected that when the user changes any of the Quantitytext boxes, the text box's val()be alerted as well as their correct index(). We see that the val()is outputted correctly, but the index()is always returned 0.

预计当用户更改任何Quantity文本框时，该文本框val()及其正确的index(). 我们看到val()正确输出，但index()总是返回0。

As the val()is correct, we should be sure that jQuery is loaded well and working. So why shouldn't index()be true?

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

Strange is that as I've researched, both val()and index()are jQuery functionalities. If val()was javascript base, it could be accepted. But now, one jquery Base function works, and the other does not!

奇怪的是，我已经研究，无论是val()和index()是jQuery的功能。如果val()是 javascript 基础，它可以被接受。但是现在，一个 jquery Base 函数有效，而另一个无效！

回答by Joe

.index()gets the element's current position relative to it's siblings. You should use a regex to get the number between [and ]in the input's name.

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

Use this instead:

改用这个：

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

Here it is working: http://jsfiddle.net/u8HRq/1/

它正在工作：http: //jsfiddle.net/u8HRq/1/

UPDATE: Based on your update here's a working fiddle: http://jsfiddle.net/qbmAU/2/

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

First off ids should be unique so I've changed them to classes and updated the selector for the changeevent.

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

I've also got .index()working:

我也有.index()工作：

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

index()usually works by returning the position relative to the matching siblings which is why mine and j08691's answers were working. However, if the elements aren't siblings then you can pass a selector as an argument. This returns the indexof the current element relative to the matched elements.

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

回答by j08691

This gets both:

这得到两个：

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

jsFiddle example

jsFiddle 示例

$(this).index()is the true index

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

+$(this).prop('name').match(/\d+/g)is the index from the attribute

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

---

---

Update: After you updated your question to show the code you're really using, this should help you:

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

$('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)still works to get the index from the attribute

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

$(this).closest('table').find('input[name^=quantity]').index($(this))but you'll need this format using .index()to get the index of the input elements since they're not siblings of each other. You need to pass an argument for the collection of elements you want to compare them against, in this case $(this).closest('table').find('input[name^=quantity]').

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