jquery - 正在申请:nth-child to elements regardless of their different parents

Question

我正在寻找一种方法，将 :nth-child 方法应用于分布在不同父级/容器中的元素(但似乎每个容器都从 0 开始倒数):

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

我fiddled有点绕，奇怪的是:它适用于 :nth-child(3n+3)，但我需要每个 第四 元素都受到影响，这就是它出错了。当我使用 :nth-child(4n+4) 时，它只会将其应用于显示的九个元素中的一个:

.downloads .col:nth-child(4n+4) {
    background: yellow;
}

有人可以帮我解决这个问题吗？ http://jsfiddle.net/6dkos5fy/1/

jQuery approach对我有用。谢谢亚历克斯!

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

.active {
   background: yellow;
 }

Answer 1

你的 html 结构很难。我使用 .views-field-view-1 元素创建以下内容来分隔容器。 :nth-child 没有按照您的方式工作:

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>

为了更好地理解，请检查以下代码片段:

.downloads .views-field-view-1 .col:nth-child(4n+1) {
  background: yellow;
}
.downloads .col {
  counter-increment: box;
}
.downloads .col:after {
  content: counter(box);
}

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

使用 jquery 发表评论后，您可以尝试:

var i = 1;
$(".downloads .col").each(function() {
  if (i % 4 === 0) {
    $(this).addClass("active");
  }
  i++;
});

 .active {
   background: yellow;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

引用文献

:nth-child