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

小编典典

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

javascript

我有几个随机块。每当一个块落在新行中时，我都会使它看起来不同。当用户单击按钮时，我隐藏了的几个块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>

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

阅读 480

2020-05-01

共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。在这种情况下，它将删除带有class的所有元素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();
    }
});

现在，无论隐藏了哪个div或隐藏了几个div，都可以在不中断视觉设计的情况下打开和关闭它们，因为nth- child选择器仅计算“可见”的同级对象。无需更改CSS。HTML不变。

2020-05-01