jq如何生成循环嵌套三层的div元素,并增加动态删除和添加功能
时间: 2024-03-09 20:49:03 浏览: 72
你可以使用 jq 的循环和嵌套语法来生成循环嵌套三层的 div 元素,并使用 `on()` 方法增加动态删除和添加功能。下面是一个例子:
```
// 生成循环嵌套三层的 div 元素
function generateDivs() {
var outerDivs = '';
for (var i = 0; i < 3; i++) {
var middleDivs = '';
for (var j = 0; j < 3; j++) {
var innerDivs = '';
for (var k = 0; k < 3; k++) {
innerDivs += '<div class="inner"></div>';
}
middleDivs += '<div class="middle">' + innerDivs + '</div>';
}
outerDivs += '<div class="outer">' + middleDivs + '</div>';
}
$('body').append(outerDivs);
}
// 初始生成 div 元素
generateDivs();
// 添加动态删除和添加功能
$('body').on('click', '.inner', function() {
$(this).remove();
});
$('body').on('click', '.middle', function() {
$(this).append('<div class="inner"></div>');
});
$('body').on('click', '.outer', function() {
$(this).append('<div class="middle"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div>');
});
```
这段代码将生成 3 层外层的 div 元素,每个外层元素包含 3 层中间的 div 元素,每个中间元素包含 3 个内层的 div 元素。同时,使用 `on()` 方法为每个内层、中间层和外层元素添加点击事件,实现动态删除和添加功能。
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)