Question

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

我想选择过滤后可见的第六个元素，并使用过滤器项类，然后添加 clear：left css < / p>

<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")。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: