写好一个盒子,用jq循环一个列表数据,复制 很多个盒子
时间: 2024-03-26 11:39:15 浏览: 11
可以使用 jQuery 的 `.clone()` 方法复制已经写好的盒子,然后使用循环来渲染多个盒子。假设你已经写好一个盒子的 HTML 结构,如下所示:
```html
<div class="box">
<h2>Title</h2>
<p>Content</p>
</div>
```
可以使用以下代码循环渲染多个盒子:
```javascript
// 获取包含盒子的父元素
const parent = $('#parent');
// 获取已经写好的盒子元素
const box = $('.box');
// 循环数据数组并渲染每个盒子
data.forEach(item => {
// 复制已经写好的盒子元素
const newBox = box.clone();
// 使用 jQuery 方法设置盒子的内容
newBox.find('h2').text(item.title);
newBox.find('p').text(item.content);
// 将新盒子添加到父元素中
parent.append(newBox);
});
```
在上面的代码中,`$('#parent')` 用来获取包含盒子的父元素,`$('.box')` 用来获取已经写好的盒子元素。使用 `.clone()` 方法复制盒子元素并保存到 `newBox` 变量中,然后使用 jQuery 方法设置盒子的内容并将新盒子添加到父元素中。在每次循环中都会生成一个新的盒子元素,然后将其添加到父元素中,最终得到多个盒子。