使用 jquery 分頁插件進行分頁

Question

我在理解 jQuery 分頁插件時遇到了一些問題。 這是我第一次使用它。 在我的上一個問題上，一個人向我提供了這個解決方案，但我無法讓它為我工作； 我不明白為什么下一個房間都進入前一個房間。 這是一張照片

 function __createRoomCard(data) { for (var i = 0, len = data.length; i < len; i++) { data[i] = `<div class="rooms__item-wrapper" id="rooms__item-wrapper"> <picture><img class="rooms__image" src="img/${data[i].img}" alt="Room image"></picture> <ul class="rooms__item"> <li><h2 class="rooms__item-heading">${data[i].name}</h2></li> <li class="rooms__item-description"><p class="rooms__item-description--list"> <sup class="rooms__item-description--dollar">$</sup> <span class="rooms__item-price">${data[i].price}</span><sub>/per night</sub></p></li> </ul>`; } return data.join(""); } $(document).ready(function() { DATA_SOURCE = [{ img: 'rooms_img_1.jpg', price: 125, name: 'Single Room' }, { img: 'rooms_img_2.jpg', price: 240, name: 'Standart Room' }, { img: 'rooms_img_3.jpg', price: 325, name: 'Double Room' }, { img: 'rooms_img_4.jpg', price: 450, name: 'Family Room' }, { img: 'rooms_img_5.jpg', price: 500, name: 'VIP Room' }, { img: 'rooms_img_6.jpg', price: 600, name: 'Suite' }] $('#list').pagination({ dataSource: DATA_SOURCE, pageSize: 3, //here put number of items per page callback: function(data, pagination) { // template method of yourself var html = __createRoomCard(data); $('#Z').html(html); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://pagination.js.org/dist/2.1.5/pagination.min.js"></script> <div id="Z">Loading...</div> <div id="list"></div>

Answer 1

嗨，我的朋友，請像這樣在data[i]的末尾添加</div>

</ul></div>