JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JavaScript

$('li').each(

function(i) {
    $(this).text('list element ' + i);
});

function indexAmongSiblings(elem) {
    if (!elem) {
        return false;
    }
    var that = elem;
    var parent = that.parentNode;
    var siblings = parent.childNodes;
    var elemSiblings = [];
    for (var s = 0, numberOf = siblings.length; s < numberOf; s++) {
        if (siblings[s].nodeName != '#text' && siblings[s].tagName != undefined) {
            elemSiblings.push(siblings[s]);
        }
    }
    for (var e=0,l=elemSiblings.length; e<l; e++){
        if (elemSiblings[e] == elem){
            console.log('Element number: ' + e + ' among its siblings.');
        }
    }
}

var elements = document.getElementsByTagName('*');

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function(e) {
        e.stopPropagation();
        indexAmongSiblings(this);
    };
}