如何让第 n 个子选择器跳过隐藏的 div [重复]答案

【问题标题】：How to get nth-child selector to skip hidden divs [duplicate]如何让第 n 个子选择器跳过隐藏的 div [重复]
【发布时间】：2015-11-28 01:46:23
【问题描述】：

我有几个随机块。每当一个块落入新行时，我都会让它看起来不同。当用户点击一个按钮时，我用display:none隐藏了几个块，问题就出现了。 nth-child 选择器还计算隐藏元素。

有没有办法忽略那些特定的块，所以每一行都有不同的样式？这是一个类似场景的例子。

$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})

.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    .board-item:nth-child(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  .board-item:nth-child(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  .board-item:nth-child(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide others</button>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">1</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">2</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">3</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">4</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">5</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">6</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">7</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">8</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">9</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">0</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">10</div>
        </div>
    </div>
    <div>

只需通过 sn-p 或 EXTERNAL FIDDLE，您就会得到我的问题。

我专门寻找纯 CSS 解决方案。 请为您的答案提供一个小提琴！我无法永久删除这些块，我的用户可以选择在按钮单击时过滤文件，这就是隐藏和显示场景的原因。

【问题讨论】：

在您的情况下，您只需要为行中的第一个项目着色。我说的对吗？
是的，你没看错，实际上，它们是不等高的块，我在每个新行中添加clear:float，以防止它流向错误的方向
只需使用用户 ID 作为类名...并以该类为目标来切换可见性
不...原来我错了。 :nth-of-type 和 :nth-child 将计算所有相同类型的元素，无论它们是否隐藏。可能没有针对此问题的纯 CSS 解决方案。
我试过 .board-item:not(.hidden):nth-of-type(count) .board-item--inner 也没有用。

标签： javascript jquery html css css-selectors

【解决方案1】：

当用户点击一个按钮时，我通过display:none隐藏了几个块，问题就出现了。 nth-child 选择器也算隐藏元素。

有没有办法忽略那些特定的块，所以每一行有不同的风格吗？

问题在于nth-child() 选择器会查看同一父级下的所有兄弟姐妹，而不管其样式如何。应用 display: none 并不重要，因为 CSS 不会从 DOM 中删除元素，因此它仍然是同级元素。

来自规范：

6.6.5.2. :nth-child() pseudo-class

:nth-child(an+b) 伪类表示法表示一个元素在文档中之前有一个+b-1个兄弟元素树，对于 n 的任何正整数或零值，并且具有父级元素。 （强调我的）

为了使您声明的nth-child 规则在用户单击隐藏 div 后起作用，您需要从 DOM 中删除隐藏的 div，这样它们就不再作为兄弟姐妹存在.

在您的问题中，您要求使用纯 CSS 解决方案。但是在您的 cmets 中，您说 HTML 对更改是开放的。您还可以使用一些 jQuery 来隐藏元素。

在你的 jQuery 中添加一小行代码就可以解决问题：

$('.hidden').remove();

.remove() method 将元素（及其后代）从 DOM 中取出。在这种情况下，它会删除所有具有 hidden 类的元素。

更正

remove() 的问题是无法恢复使用此方法从 DOM 中取出的元素，这会破坏切换功能。

幸运的是，jQuery 提供了另一种选择：detach()。

.detach() 方法与.remove() 相同，不同之处在于 .detach() 保留所有与已删除关联的 jQuery 数据元素。此方法在要移除的元素时很有用稍后重新插入到 DOM 中。

所以如果我们替换原来的代码...

$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})

...使用此代码...

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

... 网格按预期工作。（代码信用：@JosephMarikle）

DEMO

现在，无论隐藏了哪些 div 或隐藏了多少，都可以在不破坏视觉设计的情况下打开和关闭它们，因为 nth-child 选择器只计算“可见”兄弟姐妹。 CSS 没有变化。 HTML 没有变化。

【讨论】：

【解决方案2】：

我会结合:nth-of-type 选择器和您的切换功能的小修改来做到这一点。

基本思想不是从 DOM 中删除那些 .css--all-photo 元素，而是将它们包装到 <hidden> 容器中。和unwrap() 恢复全套。在这种情况下，:nth-of-type 将完全按照您对 :nth-child 所做的操作。

var state = false;

$('.hide-others').click(function () {
    if( !state ) {
      $('.css--all-photo').wrap('<hidden>');
      state = true;
    } else {
      $('hidden').unwrap();
      state = false;
    }
})

hidden { display:none; } 

.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    div.board-item:nth-of-type(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  div.board-item:nth-of-type(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  div.board-item:nth-of-type(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide others</button>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">1</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">2</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">3</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">4</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">5</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">6</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">7</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
            <div class="board-item--inner">8</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">9</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">0</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
            <div class="board-item--inner">10</div>
        </div>
    </div>
    <div>

【讨论】：

【解决方案3】：

您正在寻找的是 nth-of-class 不幸的是它不存在！当您使用 JS 切换隐藏类时，这是隐藏和显示子项之间的唯一区别，因此您需要告诉 css 计算某个类的 div，（让我们说“显示”），但不幸的是，css nth-child 选择器并不太关注孩子的班级。你可以阅读更多here。

【讨论】：

【解决方案4】：

这里是我的意思的一个例子：https://jsfiddle.net/happy2deepak/g7gL5zfb/4/ 在这种情况下，它将忽略类为 .css--all-photo... 的元素，但您可以使用您想忽略的任何类

$('.hide-others').click(function () {
    $('.user-a').not('.css--all-photo').toggleClass('hidden');
})

【讨论】：

thanx Leo，但我不认为，你有我的问题！我在隐藏或显示块方面没有问题，问题是，如果我使用 display:none 隐藏少量元素，nth-child(count) 也会计算隐藏元素，这会破坏我由 css 给出的样式，并且会在布局中产生问题。所以我正在寻找一种方法来防止它