我有以下 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 因為他們有不同的父母。我如何修改它以包含其他父母的所有產品？
uj5u.com熱心網友回復：
您只需要訪問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>uj5u.com熱心網友回復：
獲取所有的 li.products，然后通過測驗 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>uj5u.com熱心網友回復：
這是我嘗試獲取所有使用的產品document.querySelectorAll，它將選擇所有具有product. 之后將其更改為一個 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/338447.html
標籤：javascript html 数组 dom