如何让第 n 个子选择器跳过隐藏的 div [英] How to get nth-child selector to skip hidden divs

问题描述

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

I have a few random blocks. Whenever a block falls in the 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 a different style? This is an example of a 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 the 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() 选择器会查看同一父级下的所有兄弟姐妹，而不管其样式如何.应用 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()伪类

: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 类的元素.

更正

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

The problem with remove() is that elements taken from the DOM with this method can't be restored, and this breaks the toggle function.

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

Fortunately, jQuery offers an alternative: detach().

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

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)

演示

现在，无论隐藏了哪些 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.

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