3

我正在尝试通过从tfoot同一个表的文本框字段中添加值来构建一个表。最终目标是能够内联编辑先前添加的行，同时仍然保留添加更多行的能力。

我有以下标记：

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

以下脚本将所有input[type=text]元素存储tfoot在输入变量中。从那里我试图用来.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);
    });
});

不幸的是，选择器选择data-function="X"器仅适用于服务。所有其他选择器返回-1指示未找到值。上面的代码来自这个jsFiddle，它说明了这个问题。我不喜欢使用索引，但不能使用元素id，因为我需要一个更通用的解决方案。

当指定选择器时，为什么jQuery .index()方法仅适用于集合中的第一个元素？

4

2 回答 2

1

从文档：

如果在元素集合上调用 .index() 并传入DOM 元素或 jQuery 对象，则 .index() 返回一个整数，指示传递的元素相对于原​​始集合的位置。

所以这应该工作：

inputs.index($('[data-function="protocol"]'));
...

演示：http: //jsfiddle.net/Dfxy9/2/

于 2013-02-20T04:24:08.750 回答
0

在您使用的上下文中，它.index仅在 jQuery 集合中的第一个元素上调用。jQuery 对任何非迭代方法（例如.html、.attr、.text）都这样做——.index也不例外。

而不是使用集合，而是使用选择器：http: //jsfiddle.net/4kLqb/

于 2013-02-20T04:25:33.257 回答