如何从 CSS nth-child 选择器计数中排除隐藏元素？

如何避免 CSS nth-child 选择器中的隐藏元素

使用按钮点击隐藏带有 display: none 的元素时，nth-child 选择器会同时考虑可见和隐藏项目。这可能会破坏不同行的样式模式。

说明：

CSS nth-child() 选择器根据元素在兄弟元素中的位置来匹配元素。然而，即使使用 display: none，隐藏元素仍保留在 DOM 中，导致计数不正确。

解决方案：

从第 n 个子元素计数中排除隐藏元素，您必须将它们从 DOM 中完全删除。但是，使用remove()方法会阻止它们稍后恢复，从而干扰切换功能。

替代方法：

相反，使用jQuery的detach()方法，该方法保留事件侦听器和其他元数据。操作方法如下：

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();
    }
});

说明：

此代码切换所选 div 的可见性，同时保持正确的第 n 个子级数：

1. 将分离的div存储在divs变量中。
2. 如果div不为空，则之前已被单击过。根据 div 的初始索引数据属性将它们按原始顺序追加回行。
3. 如果 div 为空，则分离指定的 div 并将它们存储在 div 中。

优点：

• 尽管存在隐藏元素，仍保留第 n 个子级的准确性。
• 允许轻松切换可见性，而不破坏视觉设计。
• 否需要更改 HTML 或 CSS。

以上是如何从 CSS nth-child 选择器计数中排除隐藏元素？的详细内容。更多信息请关注PHP中文网其他相关文章！