Fatal编程技术网
  • javascript/
  • Javascript 第n种类型未按需要工作

Javascript 第n种类型未按需要工作

javascript jquery html css

Javascript 第n种类型未按需要工作,javascript,jquery,html,css,css-selectors,Javascript,Jquery,Html,Css,Css Selectors,我正在做的网站响应。我的HTML代码如下所示： <h2>Title</h2> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5">...</div> <div class="column-5

我正在做的网站响应。我的HTML代码如下所示：

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
我的JS喜欢

$('.column_5:nth-of-type(5n+5)').addClass('last-child')
上述代码当前生成的输出如下所示：

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
如何实现这一点？

据我所知，纯CSS无法实现这一点，因为当类型的第n个
选择器之间存在不同的元素时，它不会重置计数器。还请注意，
nth of type
主要作用于元素类型，而不是附加到它的类选择器

您当前的选择器（
.column\u 5:nth类型（5n+5）
）将选择每种类型的第5个元素，这些元素碰巧也有
class='column\u 5'
）。它将在所有类型的元素上工作（即，它将在第5个
h2
、第5个
div
、第5个
span
中选择所有元素，只要它们具有所需的类别）。HTML中的选择器和类之间也存在不匹配，但我认为这是一个输入错误

您最好使用JavaScript/jQuery来实现这一点，下面是一个使用JavaScript的示例方法（我假设您对JS答案没有意见，因为它被标记在问题中）

代码几乎是不言自明的，但为了更好地理解，我添加了一些内联注释。它将该类应用于每5个具有所需类的元素（不考虑元素类型）



window.onload=function（）{
var j=0；
var els=document.queryselectoral（'body*'）；//选择父项下的所有元素，但可以用所需的父项替换body。
对于（i=0；i


。最后一个孩子{
背景：红色；
}


标题
...
...
...
...
...
...
标题
...
...
...
...
...
...
...
...
...
...
...

…
据我所知，纯CSS无法实现这一点，因为当类型的第n个
选择器之间存在不同的元素时，它不会重置计数器。还请注意，
nth of type
主要作用于元素类型，而不是附加到它的类选择器

您当前的选择器（
.column\u 5:nth类型（5n+5）
）将选择每种类型的第5个元素，这些元素碰巧也有
class='column\u 5'
）。它将在所有类型的元素上工作（即，它将在第5个
h2
、第5个
div
、第5个
span
中选择所有元素，只要它们具有所需的类别）。HTML中的选择器和类之间也存在不匹配，但我认为这是一个输入错误

您最好使用JavaScript/jQuery来实现这一点，下面是一个使用JavaScript的示例方法（我假设您对JS答案没有意见，因为它被标记在问题中）

代码几乎是不言自明的，但为了更好地理解，我添加了一些内联注释。它将该类应用于每5个具有所需类的元素（不考虑元素类型）

window.onload=function（）{
var j=0；
var els=document.queryselectoral（'body*'）；//选择父项下的所有元素，但可以用所需的父项替换body。
对于（i=0；i
。最后一个孩子{
背景：红色；
}
标题
...
...
...
...
...
...
标题
...
...
...
...
...
...
...
...
...
...
...

…
据我所知，纯CSS无法实现这一点，因为当类型的第n个选择器之间存在不同的元素时，它不会重置计数器。还请注意，
nth of type
主要作用于元素类型，而不是附加到它的类选择器

您当前的选择器（
.column\u 5:nth类型（5n+5）
）将选择每种类型的第5个元素，这些元素碰巧也有
class='column\u 5'
）。它将在所有类型的元素上工作（即，它将在第5个
h2
、第5个
div
、第5个
span
中选择所有元素，只要它们具有所需的类别）。HTML中的选择器和类之间也存在不匹配，但我认为这是一个输入错误

您最好使用JavaScript/jQuery来实现这一点，下面是一个使用JavaScript的示例方法（我假设您对JS答案没有意见，因为它被标记在问题中）

代码几乎是不言自明的，但为了更好地理解，我添加了一些内联注释。它将该类应用于每5个具有所需类的元素（不考虑元素类型）

window.onload=function（）{
var j=0；
var els=document.queryselectoral（'body*'）；//选择父项下的所有元素，但可以用所需的父项替换body。
对于（i=0；i
。最后一个孩子{
背景：红色；
}
标题
...
...
...
...
...
...
标题
...
...
...
...
...
...
...
...
...
...
...

…
据我所知，这不能用纯CSS来完成，因为
nth类型
selec 
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<h2>Title</h2>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>
<div class="column-5 last-child">...</div>
<div class="column-5">...</div>
<div class="column-5">...</div>

<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>
<div class="blocks">
    <h2>Title</h2>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
    <div class="column-5">...</div>
</div>