首頁 > web前端 > css教學 > 主體

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

Patricia Arquette
發布: 2024-11-16 04:15:03
原創
585 人瀏覽過

How to Exclude Hidden Elements from CSS nth-child Selector Counting?

如何避免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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板