javascript – jQuery替代支持类的第n个子选择器

2019-05-19 10:25:15 阅读：135 来源： 互联网

标签：jquery javascript css css-selectors html

我有这样的结构：

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

我只需要选择.parent div的第n个.item div class子(计数器为每个父节点重置).

例如,我想选择每三个“div.item”元素,所以我期望影响内容为“Item 3”,“Item 6”,“Another item 3”的元素.

规则：

>所需的类总是应用于“div”元素(可能并不重要).
>父母总是“父母”阶级,也总是“div”元素.
>在div中,可以有其他具有随机类名(或没有)的div(或任何其他类型的元素),这些不得干扰第n个计数器.
>元素也可以嵌套,因此每个项类元素可以另外包含另一个父类元素,并且还包含另一个项类元素.

不幸的CSS选择器：

div.parent div.item:nth-child(3n)

与nth-child()无法正常工作.尽管效果仅应用于具有给定类的元素,但计数本身并不正确,因为它还会计算没有给定类的元素.

我怀疑是否会有纯CSS解决方案,而且因为我实际上将它用作jQuery选择器,我想要一些简单的jQuery替代方案.谢谢你们给我任何帮助.

解决方法:

您可以根据父项中具有相同类别的其他项目的索引过滤项目

$('.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,javascript,css,css-selectors,html
来源： https://codeday.me/bug/20190519/1134300.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – jQuery替代支持类的第n个子选择器