将每个 Li 元素转换为一个对象

Question

我有一个由用户在页面上动态生成的游戏的无序列表。我想要做的是将每个列表项变成一个对象，让我可以存储他们的名字和分数。由于我仍在学习 JS，因此在代码上苦苦挣扎。我已经了解了创建每个对象的功能，但我不知道如何为 John、Paul、Ringo 和 George（或用户可能添加到列表中的任何其他人）实际创建对象

<ul id="playerList">
     <li>John</li>
     <li>Paul</li>
     <li>Ringo</li>
     <li>George</li>
</ul>  

const createPlayer = (playerName, points) => {return {name, points}}

Answer 1

以下是如何从 html 中获取每个 li 内容，然后对这些数据做任何您想做的事情：

var numberOfPlayers = getElementsByTagName('li').length;
for (i=0 ; i< numberOfPlayers; i++) {
var playerData document.getElementById('playerList').getElementsByTagName('li')[i].innerText;
// create your objects or do whatever you want with playerData
}

根据 Yishmeray 的建议，您也可以这样做，根据您的喜好：

var playerData = document.querySelectorAll('#playerList li'); 
playerData.forEach(element => { 
var thisPlayerTxt = element.innerText;
//create your objects or do whatever you want with playerData
});

以防万一您想创建一个 li 并将其附加到您的列表中：

var list = document.getElementById('playerList');
var name = 'John';
var player = document.createElement('li');
player.innerText = name;
list.appendChild(player);

将每个 Li 元素转换为一个对象

Convert each Li element into an object

javascript

object

html-lists