Erstellen eines Arrays von Ids

Question

Ich habe ein Array, var players = ['', '', '', '', '', ''];. Jetzt möchte ich, dass Array 6 Elemente aus einer Liste enthalten:

<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> 

Jetzt will ich das Array ein bisschen aussehen wie diese: var players = [.node7, .node8, .node9, .node10, .node11, .node12];. Wenn ich ein neues Array namens round1 erstellen soll, kann ich dann die Werte der ersten 4 Werte aus dem Array players erhalten? Es sollte ungefähr so ​​ähnlich aussehen: var round1 = [players[0], players[1], players[2], players[3]];

Also wie kann ich das alles machen?

Answer 1

Sie können folgenden Ansatz verwenden.

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);

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

<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 2

können Sie die element.children Eigenschaft verwenden, um eine Liste aller li in Ihrem ul, zu bekommen und dann Array#map nutzen, um ihre id zu bekommen. Verwenden Sie dann players.slice(0, 4), um Ihre round1 Spieler zu erhalten.

Es ist unklar, aus Ihrer Frage, ob Sie players wollen die Namen der einzelnen Spieler zu halten, die li Elemente selbst oder die id jedes li Element. Hier ist, wie Sie alle drei bekommen würde:

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 3

Sie den Knoten der Eltern-ID bekommen konnte, und dann alle Listenelemente und die ID extrahieren.

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);

<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