如何将列表项的内容从一个列表复制到另一个列表答案

【问题标题】：How to copy contents of list items from one list to another如何将列表项的内容从一个列表复制到另一个列表
【发布时间】：2022-11-12 05:10:56
【问题描述】：

我需要将列表中每个<li> 的内容复制到另一个列表中对应的<li>。所以#list1 中的第一项将进入#list2 的第一项。 #list1 的第三项将进入#list2 的第三项。

这是我的html：

<ul id="list1">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>    
    <li>List Item 5</li>
    <li>List Item 6</li>
    <li>List Item 7</li>        
</ul>


<ul id="list2">
    <li class="item yes">COPY GOES HERE</li>
    <li class="item yes">COPY GOES HERE</li>
    <li class="item yes">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>            
</ul>

我尝试了以下，但它复制了整个 <li> 元素，我只想复制文本里面每个<li>：

$(newList).html($(oldlist).html());

然后我尝试了这个，但无法让它工作：

var headings = '';
    
$("#list1 li").each(function(idx, li) {
        headings = $(li).html();
});
    
  
$("#list2 li").each(function(idx, li) {
       var items = $(li).html();
    
       $( items ).html( headings );
       
});

有任何想法吗？谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

请尝试使用以下代码进行操作

const list1 = document.querySelectorAll('#list1 li'),
      list2 = document.querySelectorAll('#list2 li');

list1.forEach((li, index) => {
  list2[index] ? 
    list2[index].textContent = li.textContent : '';
});

<ul id="list1">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>    
    <li>List Item 5</li>
    <li>List Item 6</li>
    <li>List Item 7</li>        
</ul>


<ul id="list2">
    <li class="item yes">COPY GOES HERE</li>
    <li class="item yes">COPY GOES HERE</li>
    <li class="item yes">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>
    <li class="item">COPY GOES HERE</li>            
</ul>

【讨论】：