Digamos que tengo este marcado:
<ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul>Y tengo este jQuery:
$("#wizard li").click(function () { // alert index of li relative to ul parent }); ¿Cómo puedo obtener el índice del hijo li en relación con su padre, al hacer clic en ese li ?
Por ejemplo, cuando hace clic en "Paso 1", debería aparecer una alert con "0".
$("#wizard li").click(function () { console.log( $(this).index() ); }); Sin embargo, en lugar de adjuntar un controlador de clic para cada elemento de la lista, es mejor (en cuanto al rendimiento) usar el delegate que se vería así:
$("#wizard").delegate('li', 'click', function () { console.log( $(this).index() ); }); En jQuery 1.7+, debe usar on . El siguiente ejemplo vincula el evento al elemento #wizard , que funciona como un evento de delegado:
$("#wizard").on("click", "li", function() { console.log( $(this).index() ); });algo como:
$("ul#wizard li").click(function () { var index = $("ul#wizard li").index(this); alert("index is: " + index) });No es necesario requerir una gran biblioteca como jQuery para lograr esto, si no lo desea. Para lograr esto con la manipulación DOM incorporada, obtenga una colección de los hermanos li en una matriz y, al hacer clic, verifique el indexOf del elemento en el que se hizo clic en esa matriz.
const lis = [...document.querySelectorAll('#wizard > li')]; lis.forEach((li) => { li.addEventListener('click', () => { const index = lis.indexOf(li); console.log(index); }); }); <ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul>O, con delegación de eventos:
const lis = [...document.querySelectorAll('#wizard li')]; document.querySelector('#wizard').addEventListener('click', ({ target }) => { // Make sure the clicked element is a <li> which is a child of wizard: if (!target.matches('#wizard > li')) return; const index = lis.indexOf(target); console.log(index); }); <ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul> O, si los elementos secundarios pueden cambiar dinámicamente (como con una lista de tareas pendientes), entonces tendrá que construir la matriz de li s en cada clic, en lugar de hacerlo de antemano:
const wizard = document.querySelector('#wizard'); wizard.addEventListener('click', ({ target }) => { // Make sure the clicked element is a <li> if (!target.matches('li')) return; const lis = [...wizard.children]; const index = lis.indexOf(target); console.log(index); }); <ul id="wizard"> <li>Step 1</li> <li>Step 2</li> </ul>