javascript - HTML 中的 JQuery 类计数

Question

我有一个用于接收用户输入的 HTML。我的工作是计算他们输入的卡片并为这些卡片设计样式。卡片放在里面<section> .

问题:我的 Jquery 只计算一个部分并且运行良好。如果用户输入多个部分，代码将不起作用。我下面的代码显示了用户输入 2 个部分的时间:第一部分的卡片应该是蓝色的，第二部分的卡片应该是红色的，但现在它们都是蓝色的。

jsfiddle

var numCard = $('.cards').length;
if (numCard == "2") {
  /* $('.cards').css('color', 'red'); */
  $("section .cards").parent().addClass("two-cards");
} else if (numCard == "3") {
  $("section .cards").parent().addClass("three-cards");
} else {
  $('section .cards').parent().addClass("four-cards");
}

body {
  padding: 20px;
  font-family: Helvetica;
}

.two-cards .cards {
  color: red;
}

.three-cards .cards {
  color: green;
}

.four-cards .cards {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="cards">
    First Card
  </div>
  <div class="cards">
    Second Card
  </div>
  <div class="cards">
    Third Card
  </div>
  <div class="cards">
    Third Card
  </div>
</section>
<p>

  <section>
    <div class="cards">
      First Card
    </div>
    <div class="cards">
      Second Card
    </div>
  </section>

Answer 1

Working fiddle

您需要遍历各个部分，然后使用 this 关键字进行检查:

$('section').each(function() {
  var numCard = $('.cards', this).length;

  if (numCard == "2") {
    $(this).addClass("two-cards");
  } else if (numCard == "3") {
    $(this).addClass("three-cards");
  } else {
    $(this).addClass("four-cards");
  }
});

body {
  padding: 20px;
  font-family: Helvetica;
}

.two-cards .cards {
  color: red;
}

.three-cards .cards {
  color: green;
}

.four-cards .cards {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="cards">
    First Card
  </div>
  <div class="cards">
    Second Card
  </div>
  <div class="cards">
    Third Card
  </div>
  <div class="cards">
    Third Card
  </div>
</section>
<p>
  <section>
    <div class="cards">
      First Card
    </div>
    <div class="cards">
      Second Card
    </div>
  </section>
</p>