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

【问题标题】：jquery/javascript or css - css for nth child only when display is visiblejquery/javascript 或 css - 仅当显示可见时才用于第 n 个孩子的 css
【发布时间】：2012-07-29 12:32:32
【问题描述】：

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

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

我按照这里建议的方法：

Make css nth-child() only affect visible

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

【问题讨论】：

您的问题标题和标签与您的描述冲突。您在寻找 jQuery 解决方案还是 CSS 解决方案？
编辑标题以包含任一解决方案

标签： javascript jquery css css-selectors

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当有隐藏物品时，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));
});

【讨论】：

【解决方案3】：

我找到了一种方法来做到这一点 - 虽然它似乎可以简化。

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');
    }
  });
}

【讨论】：