当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Applying :nth-child to elements regardless of their different parents

问题描述:

I'm looking for a way to apply the :nth-child approach to elements that are spread over different parents / containers (but it seems to count back from 0 with every container):

<div class="downloads">

<div class="views-field views-field-view">

<span class="field-content">

<div class="view">

<div class="view-content">

<div class="col col-xs-3">text</div> <!-- 1 -->

<div class="col col-xs-3">text</div> <!-- 2 -->

<div class="col col-xs-3">text</div> <!-- 3 -->

</div>

</div>

</span>

</div>

<div class="views-field views-field-view-1">

<span class="field-content">

<div class="view">

<div class="view-content">

<div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this back as 1) -->

<div class="col col-xs-3">text</div> <!-- 5 -->

<div class="col col-xs-3">text</div> <!-- 6 -->

<div class="col col-xs-3">text</div> <!-- 7 -->

<div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->

<div class="col col-xs-3">text</div> <!-- 9 -->

</div>

</div>

</span>

</div>

</div>

I fiddled a bit around, and the strange thing is: it works with :nth-child(3n+3), but i need every fourth element to be affected, and that's where it goes wrong. When I use :nth-child(4n+4) it would only apply it to one element of the nine that are displayed:

.downloads .col:nth-child(4n+4) {

background: yellow;

}

Can someone help me out with this please?

http://jsfiddle.net/6dkos5fy/1/

jQuery approach works for me. Thanks Alex!

var i = 1;

$(".downloads .col").each(function() {

if (i % 4 === 0) {

$(this).addClass("active");

}

i++;

});

.active {

background: yellow;

}

网友答案:

Is kind hard with you html structure. I create the following using .views-field-view-1 element to separate the containers. :nth-child is not working the way you looking:

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}
<div class="downloads">
  <div class="views-field views-field-view">
    <span class="field-content"><div class="view"><div class="view-content"><div class="col col-xs-3">text</div> <!-- 1 --><div class="col col-xs-3">text</div> <!-- 2 --><div class="col col-xs-3">text</div> <!-- 3 --></div></div></span>
  </div>
  <div class="views-field views-field-view-1">
    <span class="field-content"><div class="view"><div class="view-content"><div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) --><div class="col col-xs-3">text</div> <!-- 5 --><div class="col col-xs-3">text</div> <!-- 6 --><div class="col col-xs-3">text</div> <!-- 7 --><div class="col col-xs-3">text</div> <!-- 8: should have a background-color --><div class="col col-xs-3">text</div> <!-- 9 --></div></div></span>
  </div>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: