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

【问题标题】：JQUERY Selecting nth list element across multiple unordered listsJQUERY在多个无序列表中选择第n个列表元素
【发布时间】：2015-01-24 04:11:54
【问题描述】：

不幸的是，这不能用纯 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 个列表项，而不考虑它的父项。

【问题讨论】：

在您的情况下究竟是什么不起作用？还是你的问题？
我认为您不需要为此使用 jQuery，而是使用 CSS ..
.css( "margin-left":"0px") 中的语法错误。应该是.css( "margin-left","0px") 或.css( {"margin-left":"0px"})
修复了语法错误。但它仍然选择 :nth-of-type(5n+1) 与其父级（无序列表）相关。我可以说，因为每个 ul 中的第一个列表项都被选中了。
所以只需获取所有li，循环遍历它们，然后通过增加一个计数器对其中的每五分之一执行您想做的任何事情……

标签： javascript jquery html css css-selectors

【解决方案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/

【讨论】：

【解决方案2】：

.css() 的结构格式错误。（有一个 : 而不是 , ）另外，选择器没有工作，不知道为什么选择器没有按照你的方式工作，但这应该工作。

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

【讨论】：