Question

让我们说我有.1995类的5个div和.1996类的3个div和.1997类的9个div Etcetera ...并且说我还有以下三个段落：

1995，1996和1997。

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

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

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

这将导致1995(5)，因为有5个div类别为.1995。

在我从事500多年的工作中，我想避免有500个变量，例如

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

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

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

...乘以500。Yi！

有更短的方法吗？我希望这些路线或更短一些：

$("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})`);
});

要在没有年份的情况下不添加计数器，只需在if之前添加.append语句：

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

Answer 2

如果您在包含年份的段落上贴上一个类别，则只需查找它们，然后查找所有具有该年份的div。

$('.year-total').each(function(index, element){
  var year = element.innerText.trim();
  
  element.innerText += ' ('+ document.getElementsByClassName(year).length +')';
});

Lets say that I have 5 divs with class .1995 and 3 divs with class .1996 and 9 divs with class .1997 Etcetera... and lets say I also have the following three paragraphs:

<p>1995</p>, <p>1996</p> and <p>1997<p>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="year-total">1995</p>
</div>

<div>
  <p class="year-total">1996</p>
</div>

<div>
  <p class="year-total">1997</p>
</div>

<div class="1995"></div>
<div class="1995"></div>
<div class="1995"></div>
<div class="1995"></div>
<div class="1995"></div>

<div class="1996"></div>
<div class="1996"></div>
<div class="1996"></div>

<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>
<div class="1997"></div>

Answer 3

您可以尝试

    for (var y=1995; y < (1995+500); y++)
    {
        $("div > p:contains('" + y.toString() + "')").append( '(' + ($('.' + y.toString()).length.toString()) + ')');
    }

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

3 个答案: