Idの配列を作成する

Question

私は配列がvar players = ['', '', '', '', '', ''];です。今、私は、その配列がリストから6つの項目を含むようにしたい： var players = [.node7, .node8, .node9, .node10, .node11, .node12];：

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

は今、私は配列は次のようにちょっと見てみたいです。また、round1という新しい配列を作成する場合は、配列playersから最初の4つの値を取得できますか？これは多少類似しているはずです：var round1 = [players[0], players[1], players[2], players[3]];

どうすればいいですか？

Answer 1

次の方法を使用できます。

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

あなたul内のすべてのliのリストを取得するにはelement.childrenプロパティを使用して、そのidを取得するためにArray#mapを使用することができます。その後、players.slice(0, 4)を使用してround1プレーヤーを獲得してください。

あなたがplayersは、各プレイヤーの名前、li要素自体、または各li要素のidを保持するかどうか、あなたの質問から明らかではありません。ここでは、3つのすべてを取得する方法を次のとおりです。

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

あなたは親IDのノード、その後、すべてのリストの要素を取得し、IDを抽出することもできます。

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