首頁 > web前端 > css教學 > 如何從 jQuery 中的第 n 個子選擇器中排除隱藏元素?

如何從 jQuery 中的第 n 個子選擇器中排除隱藏元素?

Linda Hamilton
發布: 2024-11-15 07:01:02
原創
806 人瀏覽過

How to Exclude Hidden Elements from nth-child Selectors in jQuery?

如何在使用第n 個子選擇器時忽略隱藏元素

在原始查詢中描述的場景中,隱藏元素導致問題對於第n 個子選擇器,有兩種主要方法可以解決這個問題:

1。從 DOM 中排除隱藏元素

使用 jQuery,您可以使用 .remove() 方法完全從 DOM 中刪除隱藏元素。這確保了它們不再被第 n 個子選擇器視為兄弟姐妹。但是,如果您稍後希望恢復隱藏的元素,則此方法不適合。

2.使用jQuery 的detach() 方法

jQuery 中的.detach() 方法從DOM 分離隱藏元素,但與.remove() 不同,它維護元素的jQuery 資料。這允許稍後重新插入分離的元素而不會丟失其資料。

更新的jQuery 程式碼:

var divs;

$('.photos-board-item').each(function (i) {
    $(this).data('initial-index', i);
});

$('.hide-others').on('click', function () {
    if (divs) {
        $(divs)
            .appendTo('.row')
            .each(function () {
                var oldIndex = $(this).data('initial-index');
                $('.photos-board-item').eq(oldIndex).before(this);
            });
        divs = null;
    } else {
        divs = $('.css--all-photo').detach();
    }
});
登入後複製

說明:

    說明:
  • 此程式碼迭代.photos. -item 元素,並為每個資料屬性指派其初始索引。
  • 按一下「隱藏」按鈕時,它會檢查是否有任何元素具有已脫離。如果是這樣,它會根據它們的初始索引將它們重新插入 DOM 中。
  • 如果沒有分離任何元素,它會分離 .css--all-photo 元素並將它們指派給 divs 變數。

注意:

  • 第 n 個子級 CSS 規則不變。
  • 隱藏元素被有效地從第 n 個子級中排除-子選擇過程,產生所需的視覺效果。
  • 分離的元素可以稍後重新插入,而不會影響視覺佈局。

以上是如何從 jQuery 中的第 n 個子選擇器中排除隱藏元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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