Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?

Question

I am trying to build up a table by adding values from textbox fields in the tfoot of the same table. 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. From there I am trying to use .index() to identify and then retrieve the value of each textbox:

$(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. All of the other selectors return -1 indicating that a value was not found. The above code is from this jsFiddle which illustrates the problem . I am not wedded to using index, but cannot use the element's id as I need a more general solution.

Why does the jQuery .index() method only work for the first element in the collection, when a selector is specified?

Answer 1

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.

So this should work:

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

Demo: http://jsfiddle.net/Dfxy9/2/

Answer 2

In the context you are using it .index is only called on the first element in the jQuery collection. jQuery does this for any non-iterative method (for example .html , .attr , .text ) -- .index is no different.

Instead of using the collection, use the selector: http://jsfiddle.net/4kLqb/