jQuery替代支持类的nth-child选择器 [英] jQuery alternative to nth-child selector that supports classes

问题描述

我有这样的结构：

 < div class =parent> 
< div class =randomclass> ...< / div> 
< div class =item>项目1< / div> 
< div class =item>项目2< / div> 
< div class =item>第3项< / div> 
< div class =randomclassdifferentname> ...< / div> 
< div class =item>项目4< / div> 
< div class =item>第5项< / div> 
< div class =item>项目6< / div> 
< div class =item>项目7< / div> 
 ... 
< / div> 
< div class =parent> 
< div class =anotherclass> ...< / div> 
< div class =item>另一个项目1< / div> 
< div class =item>另一个项目2< / div> 
< div> ...< / div> 
< div class =item>另一个项目3< / div> 
 ... 
< / div> 
 

我需要选择第n个 .item div strong> .parent div （每个父节点的计数器重置）。

例如，我想选择每个第三个div.item元素，因此我希望影响内容为项目3 ，项目6 ，另一个项目3 < 。

规则：

• 所需类别总是应用于div元素（可能不重要）。


• 父母一直都是父类，也总是div元素。


• divs（或任何其他类型的元素）与随机类名（或没有），这些不能干扰第n个计数器。


• 元素也可以嵌套，所以每个项目类元素可以：CSS选择器： p>
  
  

    div.parent div.item：nth-​​child（3n）
    

  nth-child（）无法正常运作。虽然效果只适用于给定类的元素，但计数本身不正确，因为它也计算没有给定类的元素。

  
  
  

  由于我怀疑会有纯粹的CSS解决方案，也因为我实际上使用这个作为一个jQuery选择器，我想要一些简单的jQuery替代。

  解决方案

  您可以根据父项中的索引来过滤项目，与其他同类项目相关

  
  
  

    $ '）.filter（function（_，item）{return（$（item）.siblings（'。item'）。addBack（）。index（item）+1）％3 === 0;}）。css 'color'，'red'）;  

   < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =parent> < div class =randomclass> ...< / div> < div class =item> Item 1< / div> < div class =item>项目2< / div> < div class =item>第3项< / div> < div class =randomclassdifferentname> ...< / div> < div class =item>项目4< / div> < div class =item>项目5< / div> < div class =item>第6项< / div> < div class =item>项目7< / div> ...< / div>< div class =parent> < div class =anotherclass> ...< / div> < div class =item>另一个项目1< / div> < div class =item>另一个项目2< / div> < div> ...< / div> < div class =item>另一个项目3< / div> ...< / div> 
  I have a structure like this:
  <div class="parent">
      <div class="randomclass">...</div>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="randomclassdifferentname">...</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      ...
  </div>
  <div class="parent">
      <div class="anotherclass">...</div>
      <div class="item">Another item 1</div>
      <div class="item">Another item 2</div>
      <div>...</div>
      <div class="item">Another item 3</div>
      ...
  </div>
  I need to select only nth .item div class child of a .parent div (counter resets for every parent node).
  
  For example I want to select every third "div.item" element so I'm expecting to affect elements with content "Item 3", "Item 6", "Another item 3". 
  
  Rules:
  
  
  Desired classes are always applied to a "div" element (maybe not important).
  Parents have always "parent" class and are also always "div" elements.
  Amongst divs there can be other divs (or any other type of element) with random class name (or without) and these must not interfere with the nth counter.
  Elements also can be nested so every item class element can in addition contain another parent class element and that again another item class elements.
  
  
  Unfortunatelly CSS selector:
  div.parent div.item:nth-child(3n)
  with nth-child() is not working properly. Although the effects are applied only to elements with given class, the counting itself is not correct because it counts also elements without given class.
  
  As I doubt that there will be pure CSS solution and also because I'm in fact using this as a jQuery selector, I would like some simple jQuery alternative. Thank you guys for any help you can give me.
  解决方案
  You can filter the items based on the index they have in the parent, in relation to other items with the same class
  
  
  
  $('.item').filter(function(_,item) {
      return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0;
  }).css('color','red');
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <div class="parent">
      <div class="randomclass">...</div>
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="randomclassdifferentname">...</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      ...
  </div>
  <div class="parent">
      <div class="anotherclass">...</div>
      <div class="item">Another item 1</div>
      <div class="item">Another item 2</div>
      <div>...</div>
      <div class="item">Another item 3</div>
      ...
  </div>
  
  
  
  
  
                          
  这篇关于jQuery替代支持类的nth-child选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！