web-dev-qa-db-ja.com

ループを介して配列からliを作成し、リストとしてHTMLに表示する

私はjavaScriptを学んでおり、配列をループしてHTMLとしてリストとして表示したいと考えています。どうやってやるの？

配列：var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

javascript：

function listItem(item){
  for (var i = 0; i < item.array.length; i++){
    var list = item.array[i];
    
    list = document.createElement('li');
    document.getElementByClass('box').appendChild(list);
    
    console.log(list);
  }  
 }
<div class ="box"><ul></ul></div>
javascriptarraysloopsdom
7
user4219935

提供された回答はすべて機能し、問題ありませんが、同じ問題が発生しますが、各反復で要素をDOMに追加します。リストが小さい場合、これは問題になりませんが、リストに必要な要素を多数処理する場合、DOMを常に操作するとパフォーマンスが低下します。

Liの単一の文字列を作成し、配列が完全に反復されたときに-単一のアクションでDOMで.innerHTMLを使用してULに文字列を渡す方がはるかに優れています（IMO）。同じ結果ですが、より高速です。

var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;
<div id="slideContainer"></div>
9
gavgrif

かなり簡単：

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]

array.forEach(function(item) {
  var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
});
<ul id="myUl"></ul>

このコードは次のことを行います。

  • 配列の各アイテム：
    1. 新しい<li>を作成します
    2. 配列のテキストを使用してテキストノードを作成します
    3. <li>にテキストを追加します
    4. <li>を<ul>に追加します

JQueryを使用すると、これはすべて非常に簡単になります。

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
array.forEach(function(item) {
  $("#myUL").append("<li>" + item + "</li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>

EDIT： forEachの代わりに通常のforループを使用する場合、次のようにできます。

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
for (i = 0; i < array.length; i++) {
  var li = document.createElement("li");
  var text = document.createTextNode(array[i]);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
}
<ul id="myUl"></ul>

このコードの唯一の違いは、組み込みのforEachメソッドを使用して配列をループ処理し、各要素で操作を実行する代わりに、配列のインデックスを手動でループ処理することです。

4
stybl

ES6メソッドreduceおよびtemplate literalsを使用できます。次のように使用できます。

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'],
  // Reduce will iterate over all the array items and returns a single value.
  listItems = array.reduce((result, item) => {
    // Add a string to the result for the current item. This syntax is using template literals.
    result += `<li>${item}</li>`;
    
    // Always return the result in the reduce callback, it will be the value or result in the next iteration.
    return result;
  }, ''); // The '' is an empty string, it is the initial value result.
  // Get the element from the DOM in which to display the list, this should be an ul or ol element.
  resultElement = document.getElementById('result');

// Set the inner HTML
resultElement.innerHTML = listItems;
<ul id="result"></ul>

Reduceの詳細については、こちらを参照してください： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce 。また、テンプレートリテラルについて詳しく知りたい場合は、こちらをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

4
Thijs

Array＃join を使用し、区切り文字としてリスト項目タグを使用して、配列を文字列に変換します。文字列の連結（+）。リスト要素に文字列を割り当てます（ul#target） Element＃innerHTML を使用：

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

target.innerHTML = '<li>' + array.join('</li><li>') + '</li>';
<ul id="target"></ul>
3
Ori Drori

これを試してください。また、リストに追加することもできます

var arr = [
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2)
];

console.log(arr);
var ul = document.createElement('ul');
ul.className = 'myUL';
document.getElementById('container').appendChild(ul);

function myFunction() {
     
    // for(var i =0;i<5;i++){
    //   arr.Push(Math.random().toFixed(2));
    // }
  create(arr);
}

function create(arr){
  arr.forEach(function(data){
  var li = document.createElement('li');
  ul.appendChild(li);
  li.innerHTML  += data;
  li.className = "myList";
});
}create(arr);
#container .myUL{
  padding:0px;
}

#container .myUL .myList {
  list-style-type: none;
  border:1px solid grey;
  padding:5%;
  border-radius:5px;
  margin:4px;
}
.click{
  width:80px;
  height:30px;
  border-radius:5px;
  color:#fff;
  background:#323232;
  font-size:15px;
    
}
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- create a ul li using js  -->

  <button class="click" onclick="myFunction()">Click Me</button>
<div id="container"></div>
</body>
</html>
0
sg28