相关疑难解决方法(0)

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

我已成功使用jQuery :nth-​​child()选择器从div的长列表中的每个第四个元素中删除右边距.它看起来像这样:

$(".myDivClass:nth-child(4n+4)").css("margin-right", 0);

但该页面也是开放的用户交互(通过jQuery),用户可以做的一件事是隐藏/显示元素.隐藏元素时,其样式设置为"display:none".元素是浮动的,所以如果你删除一行中间的一个元素,下面一行中的元素会跳起来,如下所示:

我的第一个想法是通过首先为所有元素添加边距然后从每个第四个可见元素中删除它来重做整个事物; 这样的事情:

$(".myDivClass").css("margin-right","20px");
$(".myDivClass:visible:nth-child(4n+4").css("margin-right", 0);

但第二行什么都不做,我认为你不能像上面的例子那样堆叠伪选择器(？)

有这个问题的解决方案吗？有一个更好的方法吗？

提前致谢!

/托马斯

我有以下html结构:

<ul class="products">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

我有以下jquery:

$(".products li:nth-child(4)").addClass("last");

正如您所看到的,上面将添加一个最后一个类到每4个<li>.

但是在我的HTML中可能存在隐藏的<li>使用display:none;通过jquery.

有没有办法跳过隐藏的元素？所以理论上我应该有以下几点:

<ul class="products">
<li><a href="#"></a></li>
<li style="display:none;"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="last"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="last"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>