I have following DOM structure
<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>
I'm trying to get the index number(4) of the marked 5th product
var chl = document.querySelector('li#element')
var prt = chl.parentNode;
var idx = Array.prototype.indexOf.call(prt.children, chl);
Above code gives me 1 because they have different parents. How can I modify it to include all products from other parents?
You just needed to access the 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>Get all of the li.products, then find the index by testing the ids...
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>This is my attempt to get all the product using document.querySelectorAll, it will select all the HTML tag with the class of product. After that change it into an array of ids, then find the index of target id from that array.
// 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>