时间戳

首页 > 解决方案 > 如何计算 div 并将总数附加到相应段落内的文本中？

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

问题描述

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

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

我想计算 div（例如 1995 级），并将结果（在括号中）附加到段落中的文本后面。到目前为止我只能写很多重复的代码，我相信一定有一个更简单的解决方案！

我设法用类计算了 5 个 div，.1995并在相应段落中的文本之后显示总数。像这样：

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

这导致<p>1995(5)</p>有 5 个带有 class 的 div .1995。

由于我工作了 500 多年，我想防止有 500 个变量，例如

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

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

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

...乘以 500。哎呀！

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

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

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

标签： jquery

解决方案

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

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

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

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

推荐阅读