将一个列表的所有元素组合到另一个列表的每个元素-简单的javascript问题

Question

我有一个HTML中的城市列表。我有一个要在HTML中做的事情列表。当单击一个按钮时，我想创建一个组合列表，其中每个城市都有一个子列表，其中包含所有要做的事情的列表。

见小提琴

当前要做的事情列表只显示为最后一个城市的子城市，而不是每个城市。我做错了什么?

单击按钮后，我希望输出如下:

<div id="combined">
<ul id="cityList">
<li>
<h3>New York</h3>
<ul class="thingsToDoList">
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</li>
</li>
<li>
<h3>Seattle</h3>
<ul class="thingsToDoList">
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</li>
</li>
<li>
<h3>Los Angeles</h3>
<ul class="thingsToDoList">
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</li>
</li>
<li>
<h3>Atlanta</h3>
<ul class="thingsToDoList">
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</li>
</ul>
</div>

但是当前的输出是这样的:

<div id="combined">
<ul id="cityList">
<li>
<h3>New York</h3>
<ul class="thingsToDoList"></ul>
</li>
<li>
<h3>Seattle</h3>
<ul class="thingsToDoList"></ul>
</li>
<li>
<h3>Los Angeles</h3>
<ul class="thingsToDoList"></ul>
</li>
<li>
<h3>Atlanta</h3>
<ul class="thingsToDoList">
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</li>
</ul>
</div>

这是我当前的HTML

<div id="cities">
<ul>
<li class="city">New York</li>
<li class="city">Seattle</li>
<li class="city">Los Angeles</li>
<li class="city">Atlanta</li>
</ul>
</div>
<div id="thingsToDo">
<ul>
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</div>
<button id="combine">Combine</button>
<div id="combined">
<ul id="cityList">
</ul>
</div>

和我当前的JS

const cities = document.getElementById('cities');
const thingsToDo = document.getElementById('thingsToDo');
const combine = document.getElementById('combine');
const combined = document.getElementById('combined');
const cityList = document.getElementById('cityList');
combine.addEventListener('click', function(e){

let allCities = document.querySelectorAll('li.city');

[].forEach.call(allCities, function(city){
let eachCity = document.createElement('li');
let cityHeader = document.createElement('h3');
cityHeader.innerText = city.innerText;
cityList.appendChild(eachCity);

let thingsToDoList = document.createElement('ul');
thingsToDoList.setAttribute('class', 'thingsToDoList');
eachCity.appendChild(cityHeader);
eachCity.appendChild(thingsToDoList);
}); // close allCities loop

let newThingsList = document.querySelectorAll('.thingsToDoList');
[].forEach.call(newThingsList, function(tList){
let allThingsToDo = document.querySelectorAll('li.todo');
[].forEach.call(allThingsToDo, function(thing){
tList.appendChild(thing);
}) 
})        
});

任何帮助都将是非常感激的。

Answer 1

我认为你是在不断地添加相同的节点而它最终会出现在最后一个节点?(而不是创建新节点或克隆节点)您可以在选择器上使用. clonenode (true)来实际克隆节点。我整理了一个简短的例子。我不确定它是否符合所有的要求，但希望它能有所帮助。

注意:这个例子，就像你的一样，如果你继续点击按钮，会继续添加更多。如果需要的话，需要添加逻辑来防止这种情况。

const cities = document.getElementById('cities');
const thingsToDo = document.getElementById('thingsToDo');
const combine = document.getElementById('combine');
const combined = document.getElementById('combined');
const cityList = document.getElementById('cityList');
combine.addEventListener('click', function(e){

let allCities = document.querySelectorAll('li.city');

allCities.forEach(element => {
let cityLi = document.createElement('li');
let cityHeader = document.createElement('h3');
cityHeader.innerText = element.innerText
cityList.appendChild(cityHeader);
cityList.appendChild(cityLi);
cityList.appendChild(thingsToDo.cloneNode(true));
});
});

<div id="cities">
<ul>
<li class="city">New York</li>
<li class="city">Seattle</li>
<li class="city">Los Angeles</li>
<li class="city">Atlanta</li>
</ul>
</div>
<div id="thingsToDo">
<ul>
<li class="todo">Restaurants</li>
<li class="todo">Theatres</li>
<li class="todo">Museums</li>
</ul>
</div>
<button id="combine">Combine</button>
<div id="combined">
<ul id="cityList">
</ul>
</div>