如何使用 jquery 计算父 div 中的子 div 并显示每个子 div 中的订单号？

Question

I'm currently building a CMS gallery list within Webflow and I'd like to automatically display a number within each individual child div.

I can see that I probably need to implement some sort of jquery code and I'm struggling rewrite existing solutions.

In the code below, I want to count the number of children within.feature-slider_list and then display the child order number within.feature-slider_number.

Any help would be much appreciated!

 .feature-slider_item { width: 200px; height: 200px; margin-bottom: 50px; background-color: black; }.feature-slider_wrap { position: relative; }.feature-slider_number { position: absolute; left: 30px; top: auto; right: auto; bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70px; height: 70px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 10px; background-color: #00d6d6; -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); color: #fff; font-size: 2rem; line-height: 2.5rem; font-weight: 700; }

 <div class="feature-slider_list"> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> </div>

Answer 1

Please add jQuery code to loop through the slider items and add index.

 $(document).ready(function(){ $('.feature-slider_list').children().each(function (index) { $(this).find('.feature-slider_number').html(index+1); }); } )

 .feature-slider_item { width: 200px; height: 200px; margin-bottom: 50px; background-color: black; }.feature-slider_wrap { position: relative; }.feature-slider_number { position: absolute; left: 30px; top: auto; right: auto; bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70px; height: 70px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 10px; background-color: #00d6d6; -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); color: #fff; font-size: 2rem; line-height: 2.5rem; font-weight: 700; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="feature-slider_list"> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number">1</div> </div> </div> </div>

Answer 2

Use ::after and content with attr . And I added height:100% to feature-slider_item and bottom: -30px; to .feature-slider_number to fix that one element with an index was not showing up.

 .feature-slider_item { width: 200px; height: 200px; margin-bottom: 50px; background-color: black; }.feature-slider_wrap { position: relative; height:100%; }.feature-slider_number::after { content: attr(index); }.feature-slider_number { position: absolute; left: 30px; top: auto; right: auto; bottom: -30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 70px; height: 70px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 10px; background-color: #00d6d6; -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); color: #fff; font-size: 2rem; line-height: 2.5rem; font-weight: 700; }

 <div class="feature-slider_list"> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number" index="1"></div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number" index="2"></div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number" index="3"></div> </div> </div> <div class="feature-slider_item"> <div class="feature-slider_wrap"> <img src="" class="feature-slider_image"> <div class="feature-slider_number" index="4"></div> </div> </div> </div>