Proposal: Element.elementIndex, Node.nodeIndex

[davidbukacek]

The Element.elementIndex property returns integer value indicating the position of the element relative to its adjacent elements.

The Node.nodeIndex property returns an integer value indicating the position of the node relative to its adjacent nodes, except comment nodes.

Syntax

Element.elementIndex;
Node.nodeIndex;

Example

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <!-- comment -->
    <li id="el">item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

el.elementIndex; // return 2
el.nodeIndex;    // return 6 (elements + text nodes before each tags)

Implementation

If the element is not part of the HTML DOM - both functions returns -1.

Object.defineProperty(Element.prototype, 'elementIndex', {
    enumerable: false,
    configurable: false,
    get: function() {
        if (!this.parentNode) {
            return -1;
        }

        var i = 0, el = this;

        while (el = el.previousElementSibling) {
            i++;
        }
        return i;
    },
});

Object.defineProperty(Node.prototype, 'nodeIndex', {
    enumerable: false,
    configurable: false,
    get: function() {
        if (!this.parentNode) {
            return -1;
        }

        var i = 0, el = this;

        while (el = el.previousSibling) {
            // exclude comment nodes???
            el.nodeType != 8 && i++;
        }
        return i;
    },
});

Possible use

• Paginationin slider - if I click on the third button, it will display the third frame.
• Binding items of two different containers - clicking on the second item of the 1st container displays the second item in the second container.
• Retrieve the contents of next slider items using ajax - startIndex is controlled by the first item that contains the "placeholder".

[domenic]

The "Rationale" section seems a bit weak. Can you explain why you would want to find the index? Please give a use case, i.e. an actual user wanting to accomplish something.

[davidbukacek]

@domenic I added examples of possible use.