在列表中找到一個顯示樣式屬性（<li> 標簽）</li>

Question

簡化：

我的網頁中有一個動態創建的列表項。

<li style="display:none" data-slide="1"> 1 </li>
<li style="display:none" data-slide="2"> 2 </li>
<li data-slide="3"> 3 </li>
<li style="display:none" data-slide="4"> 4 </li>
<li data-slide="5"> 5 </li>

依此類推（有些項目出現，有些則沒有）。

僅供參考：顯然這個列表在某個容器中，但解決我的問題應該無關緊要。

現在，在一個管理網站全部行為的大 JS 文件中，有一次，我需要使用我的參數相應地更改某些項目的顯示樣式屬性。

所以我試試這個：

var listItems = document.querySelectorAll("[data-slide]");  // all items have [data-slide]
for ( var m in listItems) {
if (-- my parameters --) listItems[m].style.display = 'block';
else listItems[m].style.display = 'none';
   }

我獲得的錯誤（來自 Firefox 控制台）是： Uncaught TypeError: listItems[m].style is undefined

怎么了？ 為什么我不能訪問或更改顯示屬性？

我做了幾個測試：

用下面的代碼片段替換代碼：

var listItems = document.querySelectorAll("[data-slide]");  // all items have [data-slide]
console.log(listItems);
for ( var m in listItems) {
console.log(listItems.style);
   }

我獲得此輸出（來自 Firefox 控制台）：

NodeList(42) [ li, li.active, li, li, li, li, li, li, li, li, … ]  from the first log

CSS2Properties { display → "none" }
CSS2Properties(0)
CSS2Properties { display → "none" }
CSS2Properties { display → "none" }
CSS2Properties(0)

等等（項目是42）

我無法理解，因為 listItems.style 似乎存在，但如果我添加 listItems.style.display，瀏覽器會告訴我“未定義”。

我究竟做錯了什么？ 我在哪里錯誤地解決了顯示屬性？

謝謝大家。

Answer 1

好的：我找到了正確的答案！ 我在下面發布它以幫助將來的人：

for (const lst of listItems.entries()) {  // using for..of and .entries()
if ( -- my parameters --) lst.style.display = 'block';
else lst.style.display = 'none';
 }