Tengo la siguiente estructura DOM
<ul class="main-products"> <li class="product">product</li> <li class="product">product</li> <li class="product">product</li> <section class="banner"> <ul class="sidebar-products"> <li class="product">product</li> <li class="product" id="element">product</li> // this is 5th product <li class="product">product</li>Estoy tratando de obtener el número de índice (4) del quinto producto marcado
var chl = document.querySelector('li#element') var prt = chl.parentNode; var idx = Array.prototype.indexOf.call(prt.children, chl);El código anterior me da 1 porque tienen diferentes padres. ¿Cómo puedo modificarlo para incluir todos los productos de otros padres?
Solo necesitaba acceder a prt.childNodes .
var chl = document.querySelector('li#element') var prt = chl.parentNode; const index = Array.prototype.indexOf.call(prt.childNodes, chl) console.log(index) <ul class="main-products"> <li class="product">product</li> <li class="product">product</li> <li class="product">product</li> <section class="banner"> <ul class="sidebar-products"> <li class="product">product</li> <li class="product" id="element">product</li> // this is 5th product <li class="product">product</li>Obtenga todos los li.products, luego encuentre el índice probando las identificaciones...
const products = document.querySelectorAll('li.product'); const i = Array.from(products).findIndex(p => p.id === 'element'); console.log(i); <ul class="main-products"> <li class="product">product</li> <li class="product">product</li> <li class="product">product</li> <section class="banner"> <ul class="sidebar-products"> <li class="product">product</li> <li class="product" id="element">product</li> // this is 5th product <li class="product">product</li>Este es mi intento de obtener todo el producto usando document.querySelectorAll , seleccionará todas las etiquetas HTML con la clase de product . Después de eso, cámbielo a una matriz de ID, luego busque el índice de la ID de destino de esa matriz.
// get all the li with class product and turn it into array const all_products = [...document.querySelectorAll('li.product')] // convert array of li to array of id const all_products_id = all_products.map(li => li.id) // find the id from the array of id console.log("The index of product with id of element = " + all_products_id.indexOf("element")) <ul class="main-products"> <li class="product">product</li> <li class="product">product</li> <li class="product">product</li> </ul> <section class="banner"> <ul class="sidebar-products"> <li class="product">product</li> <li class="product" id="element">product</li> <!-- this is 5th product --> <li class="product">product</li> </ul> </section>