我有以下動態創建的 html 標記：
<div class="container">
<div ><h2 >Tips & tricks</h2><img src="..."></div>
<div ><h2 >About us</h2><img src="..."></div>
<div ><h2 >Start up</h2><img src="..."></div>
</div>
我想在每個 .tmb-title 之前添加一個字幕。所以我添加了以下jQuery：
$("<p class='podcast-episode'>Episode 1</p>").insertBefore(".tmb-title");
這會在每個 .tmb-title 之前添加副標題“第 1 集”，這是我想要實作的。
現在我想將我的 .podcast-episode 字幕中的數字更改為從最后一個元素開始的元素的數量。就像標題為“啟動”的塊獲得了副標題“第 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 標記。
uj5u.com熱心網友回復：
首先，請注意，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 & 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>uj5u.com熱心網友回復：
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/476350.html
上一篇：通過id使用Jquery制作影片