使用indexOf从父节点获取索引号.调用javascript

Question

我有以下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>

我正在试图获得标记为第5个产品的索引号(4)

var chl = document.querySelector('li#element')
var prt = chl.parentNode;
var idx = Array.prototype.indexOf.call(prt.children, chl);

上面的代码给我1，因为它们有不同的父元素。我如何修改它以包括其他家长的所有产品?

Answer 1

您只需要访问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>

Answer 2

获取所有的li。产品，然后通过测试id找到索引…

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>

Answer 3

这是我使用document.querySelectorAll获取所有产品的尝试，它将选择所有具有product类的HTML标签。然后将其更改为一个id数组，然后从该数组中查找目标id的索引。

// 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>