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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有几个随机块。每当一个块落在新行中时，我都会使它看起来不同。当用户单击按钮时，我隐藏了的几个块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解决方案。 而且我无法永久删除这些块，我的用户可以选择单击按钮时过滤文件，这就是隐藏和显示方案的原因。

回答：

当用户单击按钮时，我隐藏了的几个块display:none，并且出现了问题。该nth-child选择也算隐藏要素。

有没有办法忽略这些特定的块，以便每一行都具有不同的样式？

问题在于nth-child()选择器将查看同一个父对象下的所有同级对象，而不管样式如何。display:

none因为CSS不会从DOM中删除元素，所以您应用了它并不重要，因此它仍然是同级的。

从规格：

: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不变。

以上是 如何使第n个子选择器跳过隐藏的div 的全部内容， 来源链接： utcz.com/qa/410744.html

回到顶部