使用 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>