get index number from parent node using indexOf.call javascript-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

Get the elements either by tag name (getElementsByTagName('li')), or by class (demonstrated below). Find the index by checking the ids.

const products = document.getElementsByClassName('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>

CodePudding user response：

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>