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

IT技术 javascript jquery html css css-selectors
2021-02-07 09:44:09

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

只需浏览代码段或EXTERNAL FIDDLE，您就会得到我的问题。

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

4个回答

当用户单击按钮时，我隐藏了几个块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();
    }
});

...网格按预期工作。（代码来源：@JosephMarikle）

演示

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

我会结合:nth-of-type选择器和对切换功能的小修改来做到这一点。

基本思想不是.css--all-photo从 DOM 中删除这些元素，而是将它们包装到<hidden>容器中。并unwrap()恢复全套。在这种情况下，:nth-of-type将完全按照您对:nth-child.

var state = false;

$('.hide-others').click(function () {
    if( !state ) {
      $('.css--all-photo').wrap('<hidden>');
      state = true;
    } else {
      $('hidden').unwrap();
      state = false;
    }
})
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;
  } 
}
<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>

您正在寻找的是第 n 级，不幸的是不存在！当您使用 JS 切换隐藏类时，这是隐藏和显示子项之间的唯一区别，因此您需要告诉 css 计算某个类的 div，（比如“显示”），但不幸的是，css nth-child 选择器没有不要太注意孩子的课。您可以在此处阅读更多内容。

这里是我的意思的一个例子：https : //jsfiddle.net/happy2deepak/g7gL5zfb/4/ 在这种情况下，它将忽略具有类的元素.css--all-photo......但你可以使用你想要忽略的任何类

$('.hide-others').click(function () {
    $('.user-a').not('.css--all-photo').toggleClass('hidden');
})
谢谢 Leo，但我不认为，你有我的问题！我在隐藏或显示块方面没有问题，问题是，如果我使用 隐藏了很少的元素display:none，nth-child(count)也会计算隐藏元素，这会破坏我由 css 给出的样式，并在布局中产生问题。所以我正在寻找一种方法来防止它
2021-04-03 09:44:09
其它你可能感兴趣的问题
上一篇如何在 Mozilla Firefox 3 上使用 Javascript 关闭窗口？ 下一篇在没有 Web 服务器的情况下使用 Javascript 加载本地文件