[英]Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?
I am trying to build up a table by adding values from textbox fields in the tfoot
of the same table. 我试图通过在同一个表的tfoot
中的文本框字段中添加值来构建表。 The eventual goal is to be able to then inline edit previously added rows while still leaving the capability to add more rows. 最终的目标是能够内联编辑以前添加的行,同时仍然保留添加更多行的功能。
I have the following markup: 我有以下标记:
<table>
<thead>
<tr>
<th>Service</th>
<th>Protocol</th>
<th>Source Port</th>
<th>Destination Port</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<input type="text" data-function="service" value="foo" />
</td>
<td>
<input type="text" data-function="protocol" value="bar" />
</td>
<td>
<input type="text" data-function="sourcePort" value="baz" />
</td>
<td>
<input type="text" data-function="destPort" value="fob" />
</td>
<td>
<button id="addBtn" type="button">Add</button>
</td>
</tr>
</tfoot>
</table>
The below script stores all of the input[type=text]
elements in the tfoot
in an inputs variable. 下面的脚本在输入变量中存储tfoot
中的所有input[type=text]
元素。 From there I am trying to use .index()
to identify and then retrieve the value of each textbox: 从那里我试图使用.index()
来识别然后检索每个文本框的值:
$(document).ready(function () {
$('#addBtn').click(function (e) {
var inputs = $(this).closest('tfoot').find('input[type=text]');
console.log(inputs);
var serviceIndex = inputs.index('[data-function="service"]');
console.log(serviceIndex);
console.log(inputs[serviceIndex].value);
// the remaining indexes all return -1
var protocolIndex = inputs.index('[data-function="protocol"]');
console.log(protocolIndex);
console.log(inputs[protocolIndex].value);
var sourcePortIndex = inputs.index('[data-function="sourcePort"]');
console.log(sourcePortIndex);
console.log(inputs[sourcePortIndex].value);
var destPortIndex = inputs.index('[data-function="destPort"]');
console.log(destPortIndex);
console.log(inputs[destPortIndex].value);
});
});
Unfortunately the selector data-function="X"
selector only works for service. 不幸的是,选择器data-function="X"
选择器仅适用于服务。 All of the other selectors return -1
indicating that a value was not found. 所有其他选择器返回-1
表示未找到值。 The above code is from this jsFiddle which illustrates the problem . 上面的代码来自这个jsFiddle,它说明了这个问题 。 I am not wedded to using index, but cannot use the element's id
as I need a more general solution. 我并不喜欢使用索引,但不能使用元素的id
因为我需要更通用的解决方案。
Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified? 为什么当指定选择器时, jQuery .index()方法仅适用于集合中的第一个元素?
From the docs: 来自文档:
If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection. 如果在元素集合上调用.index()并传入DOM元素或jQuery对象 ,则.index()返回一个整数,指示传递的元素相对于原始集合的位置。
So this should work: 所以这应该工作:
inputs.index($('[data-function="protocol"]'));
...
Demo: http://jsfiddle.net/Dfxy9/2/ 演示: http : //jsfiddle.net/Dfxy9/2/
In the context you are using it .index
is only called on the first element in the jQuery collection. 在您使用它的上下文中.index
仅在jQuery集合的第一个元素上调用。 jQuery does this for any non-iterative method (for example .html
, .attr
, .text
) -- .index
is no different. jQuery为任何非迭代方法(例如.html
, .attr
, .text
)执行此操作 - .index
也不.index
。
Instead of using the collection, use the selector: http://jsfiddle.net/4kLqb/ 而不是使用集合,使用选择器: http : //jsfiddle.net/4kLqb/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.