如何让第n个子选择器跳过隐藏的div

Question

我有几个随机块.每当一个块落入新行时,我都会让它看起来不同.当用户点击按钮时,我隐藏了几个块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>

只需浏览片段或EXTERNAL FIDDLE,您就会得到我的问题.

我特意寻找纯CSS解决方案. 请为您的答案提供一个小提琴!而且我无法永久删除这些块,我的用户可以选择在按钮点击时过滤文件,这就是为什么隐藏和显示的场景.

Answer 1

当用户点击按钮时,我隐藏了几个块display:none,然后出现问题.该nth-child选择也算隐藏要素.

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

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

从规格:

6.6.5.2.:nth-child() 伪类

的:nth-child(an+b)伪级符号表示元素,其具有+ B-1的兄弟姐妹之前它在文档树中,对于任意的正整数或正的零值,并具有父元素.(强调我的)

为了使nth-child用户单击隐藏div后声明的规则有效,您需要从DOM中删除隐藏的div,因此它们不再作为兄弟姐妹存在.

在您的问题中,您需要一个仅限CSS的解决方案.但是在你的评论中,你说HTML是开放的变化.你还使用一些jQuery来隐藏元素.

通过向jQuery添加一小段代码,可以解决问题:

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

该.remove()方法从DOM中获取元素(及其后代).在这种情况下,它会删除所有带有类的元素hidden.

更正

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

幸运的是,jQuery提供了另一种选择:detach().

除了保留与删除的元素关联的所有jQuery数据之外, 该.detach()方法与之相同.当删除的元素稍后要重新插入DOM时,此方法很有用..remove().detach()

所以,如果我们更换原始代码......

$('.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或隐藏多少div,都可以在不破坏视觉设计的情况下打开和关闭它们,因为nth-child选择器只计算"可见的"兄弟姐妹.没有对CSS的更改.没有对HTML进行任何更改.