如何使用 jquery 計算父 div 中的子 div 並顯示每個子 div 中的訂單號？

Question

我目前正在 Webflow 中構建一個 CMS 畫廊列表，我想在每個單獨的子 div 中自動顯示一個數字。

我可以看到我可能需要實現某種 jquery 代碼，並且我正在努力重寫現有的解決方案。

在下面的代碼中，我想計算 .feature-slider_list 中的子項數量，然后顯示 .feature-slider_number 中的子項訂單號。

任何幫助將非常感激！

 .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

請添加 jQuery 代碼以循環遍歷 slider 項並添加索引。

 $(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

使用::after並content attr 。 我將height:100%添加到feature-slider_item和bottom: -30px; 到.feature-slider_number以修復未顯示具有索引的元素。

 .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>