JQUERY在多个无序列表中选择第n个列表元素

Question

不幸的是，这不能用纯CSS来完成，因为nth-of-type仅选择相对于元素父级（ w3schools ）的关系。 因此，我正在寻找可跨多个列表使用的jquery替代方案。

HTML：

<div class="container" id="videos">
   <ul class="thumbnails">
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
   </ul>
   <ul class="thumbnails">
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
   </ul>
   <ul class="thumbnails">
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
      <li class="tn">
         <img class="tn-img" src="img/thumbnails/placeholder.jpg" />
      </li>
   </ul>
</div>

JQUERY

$( "#videos li:nth-of-type(5n+1) img" ).css( "margin-left" , "0px");

相对于其父项（无序列表），此代码仍在选择：nth-​​of-type（5n + 1）。 我可以知道，因为每个ul中的第一个列表项都已被选中。 我需要在每个无序列表中选择第5个列表项，而无需考虑其父项。

Answer 1

var items = $('#videos li'),
    counter = 0, // first element, counting starts at zero
    step = 5,
    item = null;

while((item = items.eq(counter)).length) {
    item.addClass('special'); // or do whatever else with it
    counter += step;
}

http://jsfiddle.net/1573ahug/

---

编辑：或者，通过良好的醇” for循环（这样我们就不必打电话.length等常来看看是否有其实还是元素）：

var items = $('#videos li'),
    start = 0, // first element, counting starts at zero
    step = 5;

for(var i=start, l=items.length; i<l; i+=step) {
    items.eq(i).addClass('special');
}

http://jsfiddle.net/1573ahug/1/

Answer 2

.css（）的结构格式错误。 （有一个：，而不是一个）。另外，选择器没有工作，不确定为什么选择器没有按照您的方式工作，但这应该可以。

$( "#videos li:nth-of-type(5n+1)" ).find('img').css( "margin-left","0px");