Question

是否可以只计算给定班级的孩子？

代码，以及nth-children（或nth-of-type）如何计算孩子：

<div id="parent">
  <div class="child yes">###</div> <!--odd -->
  <div class="child yes">###</div> <!--even -->
  <div class="child">###</div>     <!--odd -->
  <div class="child yes">###</div> <!--even -->
  <div class="child yes">###</div> <!--odd -->
</div>

而且css的作用不是我想要的方式

#parent .child.yes:nth-child(odd) {
  color: red;
}

#parent .child.yes:nth-child(even) {
  color: green;
}

但是我喜欢它，因为它可以算作：

<div id="parent">
  <div class="child yes">###</div> <!--odd -->
  <div class="child yes">###</div> <!--even -->
  <div class="child">###</div>     <!--skip this odd-->
  <div class="child yes">###</div> <!--odd-->
  <div class="child yes">###</div> <!--even -->
  <div class="child yes">###</div> <!--odd-->
  <div class="child yes">###</div> <!--even -->
  <div class="child yes">###</div> <!--odd-->
</div>

我也试过使用:not()运算符，但没有运气..应该通过javascript完成吗？

编辑：对于小提琴链接，查看不同的案例HERE

所以它应该在没有.yes类之后重置奇数/平均值的计数器 as：

奇数，偶数，奇数，###，奇数，偶数，###，奇数，偶数

DanL通过jQuery接受的回答

var parent = $('#parent');
var counter = 1;
parent.children('.child').each(function() {
    if ( $(this).hasClass('yes') ) {
      if ( counter%2 == 0 )
          $(this).css('color', 'red');
      else
          $(this).css('color', 'green');
      counter++;
    } else {
      counter = 1;
    }
});

Answer 1

如果我正确理解了这一点，你想循环遍历所有child yes分类元素，但是跳过任何不具有child类的yes分类元素。如果这不正确，请告诉我，我会更新我的答案。假设这是真的，可以尝试使用jQuery这样的东西。

var parent = $('#parent');
var counter = 1;
parent.children('.child').each(function() {
    if ( $(this).hasClass('yes') ) {
      if ( counter%2 == 0 )
          $(this).css('color', 'red');
      else
          $(this).css('color', 'green');
      counter++;
    } else {
      counter = 1;
    }
});

示例小提琴：https://jsfiddle.net/mr8vnbso/3/

Answer 2

使用Jquery（不是纯JS）

＆＃13;

var n = $(".child.yes").length;
$("span").text("There are " + n + " red divs.");

＆＃13;

.child {
  color: green;
}
.yes {
  color: purple;
}
.child.yes {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div class="child yes">###</div>
  <!--odd -->
  <div class="child yes">###</div>
  <!--even -->
  <div class="child">###</div>
  <!--odd -->
  <div class="child yes">###</div>
  <!--even -->
  <div class="child yes">###</div>
  <!--odd -->
</div>
<span></span>

＆＃13;

Answer 3

var array = $('#parent').children();
var arrayLength = array.length;

这有用吗？或者你想要这样的东西：

var item = $('#parent').children().eq(n); // n is a number
var item = $('#parent').children().first();
var item = $('#parent').children().last();

对于CSS部分，您不需要添加父元素：

.child.red {
  color: red;
}

.child.red {
  color: green;
}

<div id="parent">
  <div class="child red">###</div> <!--odd -->
  <div class="child green">###</div> <!--even -->
  <div class="child red">###</div>     <!--odd -->
  <div class="child green">###</div> <!--even -->
  <div class="child red">###</div> <!--odd -->
</div>

Answer 4

您希望将来可以使用，因为它是一种新的CSS4功能。

:nth-match

只计算给定班级的孩子

4 个答案: