如何从 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-board-item 元素，并为每个元素分配一个数据属性及其初始索引。
• 单击“隐藏”按钮时，它会检查是否有任何元素已分离。如果是这样，它会根据它们的初始索引将它们重新插入到 DOM 中。
• 如果没有分离任何元素，它会分离 .css--all-photo 元素并将它们分配给 divs 变量。

注意：

• 第 n 个子级 CSS 规则保持不变。
• 隐藏元素被有效地从第 n 个子级选择过程中排除，从而达到所需的视觉效果。
• 分离的元素可以重新插入稍后不影响视觉布局。

以上是如何从 jQuery 中的第 n 个子选择器中排除隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！