如何從 CSS nth-child 選擇器計數中排除隱藏元素？

如何避免CSS nth-child 選擇器中的隱藏元素

使用按鈕點擊隱藏帶有display: none 的元素時，nth-child 選擇器會同時考慮可見和隱藏項目。這可能會破壞不同行的樣式模式。

說明：

CSS nth-child() 選擇器根據元素在兄弟元素中的位置來匹配元素。然而，即使使用 display: none，隱藏元素仍保留在 DOM 中，導致計數不正確。

解決方案：

從第 n 個子元素計數中排除隱藏元素，您必須將它們從 DOM 中完全刪除。但是，使用remove()方法會阻止它們稍後恢復，從而乾擾切換功能。

替代方法：

相反，使用jQuery的detach()方法，該方法保留事件偵聽器和其他元資料。操作方法如下：

說明：

此程式碼切換所選div 的可見性，同時保持正確的第n 個子級數：

1. 將分離的div 儲存在divs 變數中。
2. 如果 divs不為空，之前已經點擊過。根據 div 的初始索引資料屬性將它們按原始順序追加回行。
3. 如果 div 為空，則分離指定的 div 並將它們儲存在 div 中。

優點：

• 儘管隱藏，但仍保留第 n 個子級的準確度元素。
• 允許輕鬆切換可見性，而不會破壞視覺設計。
• 無需更改 HTML 或 CSS。

以上是如何從 CSS nth-child 選擇器計數中排除隱藏元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！