如何从可用列表中选择每六个可见LI元素

Question

有UL列表格式的过滤器项目列表，如下所示。在过滤器上，一些带有“过滤项目”的LI将显示并隐藏取决于应用的过滤器。

我要选择每第六个要素是过滤后可见，并有一流的过滤项，并添加明确：左 CSS

<ul> 
    <li class="filter-li"></li> 
    <li class="filter-li"></li> 
    <li class="filter-items"></li> 
    <li class="filter-items"></li> 
    <li class="filter-items"></li> 
    <li class="filter-items"></li> 
    <li class="filter-items"></li> 
    . 
    . 
    . 
</ul> 

我试图jQuery选择

以下

$(".filter-li:visible:nth-child(5n+1)").css("clear","left"); 

但没有得到结果我在找。

Answer 1

您可以使用.filter()来查看li.filter-items的集合，并选择那些从零开始的索引与第六个元素匹配的索引。除以6之后，每第六个元素将剩余零，因此index % 6 === 0将起作用。但是，请记住，我们正在与一个从零开始的索引工作，所以你需要检查它是否留下余数1：

$('li.filter-items').filter(function() { 
    return $(this).index() % 6 === 1; 
}).css('clear, 'left'); 

如果这是一个有点难以理周围，你可以修改逻辑于：

($(this).index() + 1) % 6 === 0 

---

这里是证明了概念的例子，但这样它设置背景颜色为红色，便于识别我已经改变了它：

$(function() { 
 
    $('li.filter-items').filter(function() { 
 
    return $(this).index() % 6 === 1; 
 
    }).css('background-color', 'red'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="filter-li">li</li> 
 
    <li class="filter-li">li</li> 
 
    <li class="filter-items">items 1</li> 
 
    <li class="filter-items">items 2</li> 
 
    <li class="filter-items">items 3</li> 
 
    <li class="filter-items">items 4</li> 
 
    <li class="filter-items">items 5</li> 
 
    <li class="filter-items">items 6</li> 
 
    <li class="filter-items">items 7</li> 
 
    <li class="filter-items">items 8</li> 
 
    <li class="filter-items">items 9</li> 
 
    <li class="filter-items">items 10</li> 
 
    <li class="filter-items">items 11</li> 
 
    <li class="filter-items">items 12</li> 
 
    <li class="filter-items">items 13</li> 
 
    <li class="filter-items">items 14</li> 
 
    <li class="filter-items">items 15</li> 
 
</ul>

Answer 2

你可以使用一个for循环，并开发自己的逻辑是这样的。 在你的情况下使用$(obj).css("clear","left")。

var count = 0; 
 
$('.filter-items:visible').each(function(i, obj) { 
 
    count++; 
 
    if(count%6==0){ 
 
    $(obj).css("color","blue"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<ul> 
 
    <li class="filter-li ">xx</li> 
 
    <li class="filter-li">xx</li> 
 
    <li class="filter-items">1</li> 
 
    <li class="filter-items">2</li> 
 
    <li class="filter-items">3</li> 
 
    <li class="filter-items">4</li> 
 
    <li class="filter-items">5</li> 
 
    <li class="filter-items">6</li> 
 
    <li class="filter-items">7</li> 
 
    <li class="filter-items">8</li> 
 
    <li class="filter-items">9</li> 
 
    <li class="filter-items">10</li> 
 
    <li class="filter-items">11</li> 
 
    <li class="filter-items">12</li> 
 
    <li class="filter-items">13</li> 
 
    <li class="filter-items">14</li> 
 
    <li class="filter-items">15</li> 
 
    <li class="filter-items">16</li> 
 
    <li class="filter-items">17</li> 
 
    <li class="filter-items">18</li> 
 
    <li class="filter-items">19</li> 
 

 
</ul>