Question

我有一个数组，var players = ['', '', '', '', '', ''];。现在我希望该数组包含列表中的6个项目：

    <ul id="Available Players">
        <li id="node7">Player A</li>
        <li id="node8">Player B</li>
        <li id="node9">Player C</li>
        <li id="node10">Player D</li>
        <li id="node11">Player E</li>
        <li id="node12">Player F</li>
    </ul>

现在，我希望数组看起来像这样： var players = [.node7, .node8, .node9, .node10, .node11, .node12];。另外，如果我要创建一个名为round1的新数组，我可以从players数组中获取前4个值的值吗？它应该看起来有点类似于：var round1 = [players[0], players[1], players[2], players[3]];

那我怎么能做到这一切呢？

Answer 1

您可以使用以下方法。

＆＃13;

var parent = document.getElementById('Available Players'), //get the 'ul' element
    round1 = [], // create 'round1' array
    players = Array.from(parent.children).map(function(v){ //get all the 'li' elements
      return "." + v.id; //return 'id' attribute of every 'li' element 
    });
    for (var i = 0; i < 4; i++){ // push only four first elements from 'players' array 
      round1.push(players[i]); // to the 'round1' array
    }
    
    console.log(players); //reveal the results
    console.log(round1);

＆＃13;

.as-console-wrapper { max-height: 100% !important; top: 0; }

＆＃13;

<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

＆＃13;

Answer 2

您可以获取父ID的节点，然后获取所有列表元素并提取ID。

＆＃13;

var nodes = document.getElementById('Available Players').getElementsByTagName('li'),
    ids = Array.prototype.map.call(nodes, function(a) {
        return '.' + a.getAttribute('id');
    }),
    round1 = ids.slice(0, 4);
  
console.log(ids);
console.log(round1);

＆＃13;

<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

＆＃13;

Answer 3

您可以使用element.children属性获取li内所有ul的列表，然后使用Array#map获取id。然后，使用players.slice(0, 4)来获取round1玩家。

您的问题不清楚是否希望players包含每个玩家的名称，li元素本身或每个id元素的li。以下是你将如何得到这三个：

var nodes = [].slice.call(
  document.getElementById('Available Players').children
)

function prop (o) { return o[this] }

var nodeIds = nodes.map(prop, 'id')

var playerNames = nodes.map(prop, 'textContent')

console.log(nodes)
console.log(nodeIds)
console.log(playerNames)

var players = nodeIds // or whichever array above you meant

var round1 = players.slice(0, 4)

console.log(round1)

.as-console-wrapper { min-height: 100vh; }

<ul id="Available Players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

Answer 4

HTML：

<ul id="available-players">
  <li id="node7">Player A</li>
  <li id="node8">Player B</li>
  <li id="node9">Player C</li>
  <li id="node10">Player D</li>
  <li id="node11">Player E</li>
  <li id="node12">Player F</li>
</ul>

使用Javascript：

var players = [];
var li = document.querySelectorAll('#available-players li');

for (var i = 0; i < li.length; i++) {
  players.push(li[i].getAttribute('id'));  
}

Answer 5

  var players=[];  
  var round1=[];  
  var items=$("#Available_Players li")  
   items.each(function(){  
    console.log($(this));  
    players.push('.'+$(this)[0].id);
   });

  round1 = players.slice(0, 4);  
  console.log(players);  
  console.log(round1);

https://plnkr.co/edit/PxvzROhFotj0p4UKMCC4?p=preview

创建Id的数组

5 个答案: