如何使用jQuery复制指定class的<li>元素并在页面展示

问题分析 #

• 尝试1的问题：重复赋值变量listElements导致第一次克隆的元素被覆盖，且wrapAll('<li>')属于错误操作——原目标本身就是<li>元素，不需要额外包裹。
• 尝试2的问题：选择器与实际DOM结构不匹配（原DOM中不存在.fitWhereWrap类），且jQuery对象不能直接调用数组的push()方法，直接将数组传给html()也不符合语法要求。

可行代码示例 #

如果需要替换原<ul class="island_c">的内容为克隆后的目标元素，可以使用以下代码：

// 选中所有目标<li>元素并克隆
var clonedItems = $(".island_a .island_b .island_c li.aaaaaa, .island_a .island_b .island_c li.bbbbbb, .island_a .island_b .island_c li.cccccc, .island_a .island_b .island_c li.dddddd").clone();
// 清空原ul并添加克隆后的元素
$(".island_a .island_b .island_c").empty().append(clonedItems);

如果需要将克隆后的元素展示到页面其他容器（比如新增一个<div id="target-container">），可以修改为：

var clonedItems = $(".island_c li").filter(".aaaaaa, .bbbbbb, .cccccc, .dddddd").clone();
$("#target-container").append(clonedItems);

代码说明 #

1. 选择器优化：用逗号分隔多个类选择器直接匹配所有目标<li>；或者先用$(".island_c li")选中ul下所有li，再用filter()筛选指定类的元素，代码更简洁。
2. clone()方法：完整复制元素及其内部结构，若需要保留元素绑定的事件，可传入参数true（即clone(true)）。
3. empty() + append()：先清空目标容器原有内容，再添加克隆后的元素，避免内容重复。

内容的提问来源于stack exchange，提问作者user17988871