javascript - jquery/javascript 或 css - 仅当显示可见时才用于第 n 个孩子的 css

Question

我正在尝试使用 jquery 来设置模式 (3n+1) 的所有可见元素的类，但它似乎没有选择我预期的方式。我想知道我的语法是否错误。这是我的代码：

$('.filterElement:visible:nth-child(3n+1)').addClass('firstInRow');

我按照这里建议的方法：

使 css nth-child() 只影响可见

有没有办法用纯css做到这一点？

Answer 1

有没有办法用纯css做到这一点？

我不认为有。CSS 有用于元素属性的选择器，但没有用于 CSS 属性（在选择器选择元素后应用）。

Answer 2

我找到了一种方法来做到这一点——尽管它似乎可以简化。

CSS：

.element { margin-left: 10px; }
.element:nth-child(3n+1){ margin-left: 0; }
.element.firstInRow { margin-left:0 !important; }
.element.std { margin-left:15px !important; }

JAVASCRIPT

.filterButton.click(function(){
  $('.element').removeClass('firstInRow, std');
  if ($('.element').hasClass('.hideMe')){
    $(this).hide();
  }
  setMargins();
});

function setMargins(){
  $('.element:visible').each(function(i){
    if (i%3 == 0){
    $(this).addClass('firstInRow');
    } else {
    $(this).addClass('std');
    }
  });
}

Answer 3

当有隐藏物品时，nth-child 似乎玩得不好……期间。你可以在这里看到一个例子：http: //jsfiddle.net/anAgent/FzBWn/。单击“测试 2”按钮以针对包含隐藏值的行集合运行选择器。下面的 jQuery 代码是您如何选择所需内容的方法。

CSS

.container {float:left;}
.row { display:block; border: 1px solid black; padding:10px; width:100px;}
.row.odd {border: 2px dotted red;background-color:yellow;}
.hidden {visibility:hidden;display:none;}

HTML

<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row hidden">I shouldn't be highlighted</div>
    <div id="4" class="row"></div>
    <div id="5" class="row">Highlighted</div>
    <div id="6" class="row"></div>
    <div id="7" class="row hidden">I shouldn't be highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row">Highlighted</div>
    <div id="10" class="row"></div>
    <div id="11" class="row"></div>
</div>
<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row "></div>
    <div id="4" class="row">Highlighted</div>
    <div id="5" class="row"></div>
    <div id="6" class="row"></div>
    <div id="7" class="row">Highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row"></div>
    <div id="10" class="row">Highlighted</div>
    <div id="11" class="row"></div>
</div>

jQuery 获取所有可见项目，然后查找它是否是列表中的第三个。

$('.row:visible').each(function(idx) {
    $(this).toggleClass('odd',(idx%3 == 0));
});