如何将一个列表中<li>元素的内容复制到另一个列表对应<li>中

问题分析 #

你之前的尝试存在两个核心问题：

1. 第一段代码直接复制了整个#list1的HTML结构，导致连<li>元素本身都被复制过去，而非仅内部文本；
2. 第二段代码中，第一个each循环每次都会覆盖headings的值，最终只保留了#list1最后一个<li>的内容，且后续操作$(items).html(headings)完全错误——items是<li>的内部文本，不是DOM元素，根本无法执行html()方法。

正确实现方案 #

方案1：对应位置全量复制文本

如果要把#list1的每一项文本，对应复制到#list2的同位置项中（第1项→第1项，第3项→第3项...），可以用以下代码：

$("#list2 li").each(function(index) {
    // 根据当前项的索引，获取#list1中对应位置的文本（trim()去除多余空格）
    const targetText = $("#list1 li").eq(index).text().trim();
    // 将文本设置到当前#list2的<li>中
    $(this).text(targetText);
});

方案2：仅复制#list2中带.yes类的项

如果只需要处理#list2里带有.yes类的前3项，修改选择器即可：

$("#list2 li.yes").each(function(index) {
    const targetText = $("#list1 li").eq(index).text().trim();
    $(this).text(targetText);
});

方案3：复制HTML内容（而非纯文本）

如果你的<li>内部包含HTML标签（比如<span>、<a>），需要完整复制内部结构的话，把text()换成html()：

$("#list2 li").each(function(index) {
    const targetContent = $("#list1 li").eq(index).html();
    $(this).html(targetContent);
});

为什么之前的代码失效？ #

• 第一段代码$(newList).html($(oldlist).html())：直接把#list1的所有HTML（包括所有<li>标签）覆盖到#list2，完全不符合"对应位置复制"的需求；
• 第二段代码：
  • 第一个each循环中，headings被循环覆盖，最终只存了#list1最后一个<li>的内容；
  • var items = $(li).html()拿到的是<li>的内部文本字符串，$(items)会试图把这个字符串当选择器找元素，自然找不到，所以后续的html(headings)根本不会生效。

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