文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何让第n个子选择器跳过隐藏的div

问如何让第n个子选择器跳过隐藏的div
EN

Stack Overflow用户
提问于 2015-09-02 21:50:02
回答 4查看 29.3K关注 0票数 30

我有一些随机的区块。每当块落在新行中时，我都会让它看起来不一样。当用户单击一个按钮时，我通过display:none隐藏了几个块，然后问题就发生了。nth-child选择器还会计算隐藏元素的数量。

有没有办法忽略这些特定的块，这样每一行都有不同的样式？这是一个类似场景的示例。

​

代码语言：javascript
复制
$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})
代码语言：javascript
复制
.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;
  } 
}
代码语言：javascript
复制
<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，您就会明白我的问题。

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

html
css
css-selectors
javascript
jquery
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-09-03 23:59:15

当用户单击一个按钮时，我通过display:none隐藏了几个块，然后问题就发生了。nth-child选择器还会计算隐藏元素的数量。

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

问题是nth-child()选择器查看同一父对象下的所有兄弟对象，而不考虑样式。应用display: none并不重要，因为CSS不会从DOM中删除元素，因此它仍然是兄弟元素。

从规范中：

:nth-child(an+b)伪类表示法表示一个元素，该元素在文档树中的前面有一个+b-1个兄弟元素，对于n的任何正整数或零值，它都有一个父元素。(强调我的)

为了让您声明的nth-child规则在用户单击隐藏div后生效，您需要从DOM中删除隐藏的div，以便它们不再作为兄弟存在。

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

只需在jQuery中添加一小行代码，问题就可以解决：

代码语言：javascript
复制
$('.hidden').remove();

.remove() method将元素(及其后代)从DOM中取出。在本例中，它删除了类为hidden的所有元素。

校正

remove()的问题是，用这种方法从DOM中取出的元素无法恢复，这就破坏了切换功能。

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

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

所以如果我们替换原始代码..。

代码语言：javascript
复制
$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})

...with这段代码...

代码语言：javascript
复制
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)

现在，无论隐藏了哪些nth-child或多少个div，都可以在不破坏可视化设计的情况下打开和关闭它们，因为div选择器只计算“可见”的兄弟项。不更改CSS。不更改HTML。

票数 27
EN

Stack Overflow用户

发布于 2015-09-04 11:00:00

我会通过组合:nth-of-type选择器和对切换函数的小修改来做到这一点。

基本思想不是从DOM中删除那些.css--all-photo元素，而是将它们包装到<hidden>容器中。和unwrap()来恢复全集。在这种情况下，:nth-of-type将执行您对:nth-child所做的完全相同的操作。

​

代码语言：javascript
复制
var state = false;

$('.hide-others').click(function () {
    if( !state ) {
      $('.css--all-photo').wrap('<hidden>');
      state = true;
    } else {
      $('hidden').unwrap();
      state = false;
    }
})
代码语言：javascript
复制
hidden { display:none; } 

.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) {
    div.board-item:nth-of-type(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  div.board-item:nth-of-type(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  div.board-item:nth-of-type(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2015-09-03 18:11:50

您正在寻找的是nth-of-class，不幸的是，它并不存在！当您使用JS切换隐藏类时，这是隐藏的子类和显示的子类之间的唯一区别，因此您需要告诉css计算某些类的div(假设是“显示的”)，但不幸的是，css第n个子选择器并不太关注子类的类。你可以阅读更多的here。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32355054

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档