如何從可用列表中選擇每六個可見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>