如何在jQuery中使用index和length？

Question

我有一个div中的元素列表，我要在carousel中显示，我想在每个元素的内容中添加一个文本，显示div在carousel中的位置:例如:第一个元素为1/4，第二个元素为2/4，等等…

我知道我应该使用INDEX()和LENGTH()，但我不知道如何实现它。

预期结果将是

<div class="toolsCarousel">
<div>Content for 1/4</div>
<div>Content for 2/4</div>
<div>Content for 3/4</div>
<div>Content for 4/4</div>
</div>

Answer 1

考虑以下内容:

$(function() {
$(".toolsCarousel > div").each(function(index, element) {
var c = index + 1;
var l = $(".toolsCarousel > div").length;
$(element).append($("<p>").html(c + "/" + l));
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toolsCarousel">
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
<div><img src=""></div>
</div>

使用.each()方法遍历每个DIV元素。通过index和element。Index是从零开始的，因此要得到正确的计数，必须将其增加1。

看到更多:

• https://api.jquery.com/each/
• https://api.jquery.com/length/