javascript - 只计算给定类(class)的 child

Question

是否可以只计算给定类(class)的 child ？

代码，以及第 n 个 child (或第 n 个类型)如何计算 child 的数量:

<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 完成吗？

编辑: 对于 fiddle 链接，查看不同的案例 HERE

所以它应该在没有.yes类后重置奇数/偶数计数器 如:

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

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 类元素也没有 是类。如果这不正确，请告诉我，我会更新我的答案。假设这是真的，请使用 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;
    }
});

fiddle 示例:https://jsfiddle.net/mr8vnbso/3/