如何获取nth-child选择器来跳过隐藏的div [英] How to get nth-child selector to skip hidden divs

问题描述

我有几个随机块。每当一个块落在新行，我看起来不同。当用户点击按钮时，我通过 display：none 隐藏了几个块，并且出现问题。 nth-child 选择器也计算隐藏元素。

I have few random blocks. Whenever a block falls in new row, I am making it look different. When the user clicks on a button, I hide few blocks by display:none, and the problem occurs. The nth-child selector also counts hidden elements.

有办法忽略这些特定块，每行有不同的风格？这是我类似情况的一个例子。

Is there way to ignore those specific blocks, so that again every row has different style? This is an example of my similar scenario.

$('.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 ，您会得到我的问题。

Simply go through the snippet or EXTERNAL FIDDLE, and you'll get my question.

我专门寻找一个纯CSS解决方案。
请为您的答案提供一个小提琴！我不能永久删除这些块，我的用户有按钮点击过滤文件的选项，这就是为什么隐藏和显示的情况。

I am specifically looking for a pure CSS solution. Please provide a fiddle for your answers! And I cannot remove those blocks permanently, my user has option to filter files on button click, that is why hidden and shown scenario.

推荐答案

当用户点击某个按钮时， > display：none ，
，会出现问题。 nth-child 选择器也计算隐藏的
元素。

When the user clicks on a button, I hide few blocks by display:none, and the problem occurs. The nth-child selector also counts hidden elements.

有无法忽略这些特定块，所以再次每一行
有不同的风格？

Is there way to ignore those specific blocks, so that again every row has different style?

问题是 nth- child（） selector查看同一个父下的所有兄弟，不管样式如何。没有必要使用 display：none ，因为CSS不会从DOM中删除元素，因此它仍然是同级。

The problem is that the nth-child() selector looks at all siblings under the same parent regardless of styling. It doesn't matter that you've applied display: none because CSS doesn't remove the element from the DOM, and therefore it's still a sibling.

根据规范：

6.6.5.2。 ：nth-​​child（）
pseudo-class

：nth-​​child（an + b）伪类符号 代表
元素 + b-1兄弟姐妹在文档
树 中的 ，对于n的任何正整数或零值，并且具有父
元素。 （强调我）

为了 nth-child 规则，您必须在用户点击隐藏div后声明工作，您需要从DOM中删除隐藏的div ，因此它们不再存在为兄弟姐妹。

In order for the nth-child rules you've declared to work after a user clicks to hide divs, you need to remove the hidden divs from the DOM, so they no longer exist as siblings.

在您的问题中，您请求一个纯CSS解决方案。但在你的评论你说，HTML是开放的变化。你还可以使用一些jQuery来隐藏元素。

In your question you request a CSS-only solution. But in your comments you say that the HTML is open for changes. You also use a bit of jQuery to hide elements.

有一小段代码添加到你的jQuery中，问题可以解决：

With one small line of code added to your jQuery the problem can be solved:

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

.remove（）方法将元素（及其后代）从DOM中移除。在这种情况下，它删除所有具有类 hidden 的元素。

CORRECTION

remove（）的问题是从DOM

幸运的是，jQuery提供了一个替代方法： detach（） 。

Fortunately, jQuery offers an alternative: detach().

.detach（）方法与 .remove（）相同，除了
.detach（）保持所有jQuery数据与删除的
元素相关联。

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

因此，如果我们将替换元素替换为
，原始代码...

So if we replace the original code...

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

...用此代码...

...with this code...

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 ）

... the grid works as intended. (code credit: @JosephMarikle)

DEMO

现在，无论哪个div或隐藏了多少个div，它们都可以在不中断视觉设计的情况下切换，因为 nth-child 选择器只计数可见兄弟姐妹。没有对CSS的更改。没有对HTML的更改。

Now, regardless of which divs or how many are hidden, they can be toggled on and off without disrupting the visual design because the nth-child selector is counting only "visible" siblings. No changes to the CSS. No changes to the HTML.

这篇关于如何获取nth-child选择器来跳过隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！