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

假设我有

类的5个div和.1995类的3个div，以及.1996类的9个div Etcetera ...并且说我还有以下三段：

.1997，<p>1995</p>和<p>1996</p>。

我想对div进行计数（例如1995年课程），然后将结果（放在方括号内）附加在段落中。到目前为止，我只能编写很多重复的代码，我相信必须有一个更简单的解决方案！

我设法计算了类<p>1997<p>的5个div，并在相应段落中的文本之后显示了总计。像这样：

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

结果为.1995，因为有5个div为<p>1995(5)</p>类。

由于我从事500多年的工作，因此我想避免有500个变量，例如

.1995

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

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

...时间500。Yi！

有没有更短的方法可以做到这一点？我希望这些路线或更短一些：

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

我不知道要解决这个问题。如何做到这一点？

最佳答案

首先创建要检查其类的年份的数组，然后对其进行迭代：

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

如果找不到年份，则不添加计数器，只需在if之前添加.append语句：

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