小编典典

如何使第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解决方案。 请为您的答案提供小提琴! 而且我无法永久删除这些块,我的用户可以选择单击按钮时过滤文件,这就是隐藏和显示方案的原因。


阅读 481

收藏
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