jquery - 如何计算 div 数并将总计附加到相应段落内的文本中？

Question

假设我有 5 个 div 类 .1995和 3 个 div 类 .1996和 9 个 div 类 .1997等等...假设我还有以下三段:

<p>1995</p> , <p>1996</p>和<p>1997<p> .

我想计算 div 的数量(例如 1995 类)，并将结果(在括号之间)附加在段落中的文本后面。到目前为止，我只能编写大量重复的代码，我相信一定有更简单的解决方案!

我已经成功地计算了类 .1995 的 5 个 div。并在相应段落的文本后显示总计。就像这样:

var totalYear1995 = $('.1995').length;
  $("div > p:contains('1995')").append( '(' + totalYear1995 + ')');

这会导致 <p>1995(5)</p>因为有 5 个 div 类为 .1995 .

由于我已经工作了 500 多年，我希望避免出现 500 个变量，例如

var totalYear1995 = $('.1995').length;

var totalYear1996 = $('.1996').length;

var totalYear1997 = $('.1997').length;

...乘以 500。哎呀!

有没有更短的方法来做到这一点？我希望得到一些类似的东西，甚至更短的东西:

$("div > p:contains('1995')").append( '(' + ($('.1995').length;) + ')');

我不知道如何解决这个问题。如何实现这一目标？

Answer 1

首先创建一个包含您要检查其类别的年份的数组，然后对其进行迭代:

const yearsFrom1500To1999 = Array.from(
  { length: 500 },
  (_, i) => 1500 + i
);
yearsFrom1500To1999.forEach((year) => {
  const totalYear = $(`.${year}`).length;
  $(`div > p:contains('${year}')`).append(`(${totalYear})`);
});

要在未找到年份的情况下不添加计数器，只需在 .append 之前添加一个 if 语句即可:

const totalYear = $(`.${year}`).length;
if (totalYear > 0) {
  $(`div > p:contains('${year}')`).append(`(${totalYear})`);
}