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

如何在使用第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中文網其他相關文章！