有方法显示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标题之前添加一个副标题。因此，我添加了以下jQuery：

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

这增加了副标题‘第1集’前面的每一个..tmb标题，这是我想要实现的。

现在，我想将我的..podcast集副标题中的编号改为从最后一个元素开始的元素数量。就像有“启动”标题的块得到副标题“第1集”，“关于我们”得到副标题“第2集”等等。

我试过这个：

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

这对“提示和技巧”块来说很管用，副标题现在是“第3集”，但是对于“关于我们”，它仍然是“第1集”。

如果问题不明确，我很乐意添加我想要实现的HTML标记。

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>

​