如何在jQuery中使用index()和length()实现轮播元素位置序号展示

基于jQuery实现（匹配你提到的index()、length()方法） #

直接遍历轮播的子元素，调用对应方法获取索引和总长度后拼接文本即可：

// 获取轮播子元素总数量
const totalCount = $(".toolsCarousel > div").length;

// 遍历每个轮播项
$(".toolsCarousel > div").each(function () {
  // index()返回值从0开始，展示用的序号要+1
  const currentPos = $(this).index() + 1;
  // 写入文本，若要保留原有内容可将text()改为append()
  $(this).text(`Content for ${currentPos}/${totalCount}`);
});

原生JavaScript实现（无需引入jQuery） #

如果不想依赖jQuery，也可以用原生方法实现相同效果：

const carouselItems = document.querySelectorAll(".toolsCarousel > div");
const totalCount = carouselItems.length;

carouselItems.forEach((item, idx) => {
  item.textContent = `Content for ${idx + 1}/${totalCount}`;
});

注意事项 #

• 所有遍历得到的索引默认从0开始计数，一定要加1才能和实际展示的序号对应
• 如果需要保留轮播项内原有的内容，不要直接用text()/textContent覆盖内容，改为追加内容的方式即可

内容的提问来源于stack exchange，提问作者JulienA