有没有办法显示 HTML 元素中元素的数量？

Question

我有以下动态创建的 html 标记：

<div class="container">
    <div class="tmb"><h2 class="tmb-title">Tips & tricks</h2><img src="..."></div>
    <div class="tmb"><h2 class="tmb-title">About us</h2><img src="..."></div>
    <div class="tmb"><h2 class="tmb-title">Start up</h2><img src="..."></div>
</div>

我想在每个.tmb-title前加一个副标题。所以我添加了以下 jQuery:

$("<p class='podcast-episode'>Episode 1</p>").insertBefore(".tmb-title");

这在每个.tmb-title之前添加了副标题'Episode 1'，这是我想要实现的。

现在我想将 .podcast-episode 副标题中的编号更改为从最后一个元素开始的元素编号。就像带有 'Start up' 标题的块获得副标题 'Episode 1'，'About us' 获得副标题 'Episode 2' 等等..

我试过这个：

$count =  jQuery(".tmb").size() - 1;
$(".tmb:nth-last-child("+$count+") .podcast-aflevering").text(function(i,txt) {return txt.replace(/\d+/,$count);});

这对 'Tips & tricks' 块有效，副标题现在是 'Episode 3' 但对于 'About us' 仍然是 'Episode 1'。

如果问题不清楚，我很乐意补充HTML-markup我想实现的

Answer 1

首先，请注意 size() 已被弃用并从 jQuery 的最新版本中删除。请改用 length 属性，并更新您正在使用的 jQuery 版本。最新的是 3.6.0.

关于您的问题，要执行您需要的操作，请使用 length 确定有多少 .tmb-title 元素然后循环遍历它们，从总数中减去集合中当前元素的索引作为你去：

jQuery($ => {
  let podcastCount = $('.tmb-title').length;
  $('.tmb-title').each((i, el) => $(el).before(`<p class='podcast-episode'>Episode ${podcastCount - i}</p>`));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="tmb">
    <h2 class="tmb-title">Tips &amp; tricks</h2>
    <img src="...">
  </div>
  <div class="tmb">
    <h2 class="tmb-title">About us</h2>
    <img src="...">
  </div>
  <div class="tmb">
    <h2 class="tmb-title">Start up</h2>
    <img src="...">
  </div>
</div>

Answer 2

在函数外声明一个计数器（等于.tmb的数量）：

let cnt = $('.tmb').length;

然后使用 .each() 并在每次迭代时递减计数器：

$('.tmb').each(function() {
  $(this).prepend(`<p class='podcast-episode'>Episode ${cnt--}</p>`);
});

let cnt = $('.tmb').length;

$('.tmb').each(function() {
  $(this).prepend(`<p class='podcast-episode'>Episode ${cnt--}</p>`);
});

<div class="container">
    <div class="tmb"><h2 class="tmb-title">Tips & tricks</h2><img src="..."></div>
    <div class="tmb"><h2 class="tmb-title">About us</h2><img src="..."></div>
    <div class="tmb"><h2 class="tmb-title">Start up</h2><img src="..."></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

有没有办法显示 HTML 元素中元素的数量？

Is there a way to show the count of elements in an HTML element?

jquery

count