Создать li из цикла в массиве и отобразить в HTML в виде списка

Question

Создать li из цикла в массиве и отобразить в HTML в виде списка

1

Я изучаю 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>

gavgrif 10 сен. 2017, в 16:16

Источник

Теги:

javascript

arrays

loops

dom

5 ответов

Ещё вопросы

gavgrif · Answer 1 · 2017-09-10T11-54-00.000Z

Хотя все предоставленные ответы работают, и все в порядке - все они страдают от одной и той же проблемы - в том, что они добавляют этот элемент в DOM с каждой итерацией. С небольшим списком это не будет проблемой, но если вы имеете дело с большим количеством элементов, которые вы хотите в своем списке, то постоянная обработка hte DOM будет иметь стоимость исполнения.

Намного лучше (IMO) построить одну строку li, а затем, когда массив будет полностью повторен через - передайте строку в UL, используя.innerHTML - в DOM за одно действие. Тот же результат - но быстрее.

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>

Да, но я хочу добавить списки в <div class ="box"><ul></ul></div> . Как я могу это сделать?
О, я просто изменил <ul></ul> на <div></div> . Ваше решение не должно было создавать createElement . Что я использую, как это сделать?
Привет - я не уверен относительно структуры, которую вы хотите иметь - но при использовании этого подхода на основе строк - это так же просто, как добавить элемент в строку. Чтобы продемонстрировать - я изменил пустой элемент на странице в div и добавил <ul> и </ ul> к строке в js и вуаля - у вас есть div с ul внутри него.
Хорошо, спасибо за вашу помощь. Это простое / простое решение.

stybl · Answer 2 · 2017-09-10T12-33-00.000Z

Довольно простой:

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: Если вы хотите использовать обычный цикл for вместо forEach, вы можете сделать так:

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 для циклического прохождения массива и выполнения операций над каждым элементом мы вместо этого вручную перебираем индексы массива.

Можете ли вы показать решение с помощью цикла for, пожалуйста?
@KrittiyaClark Проверьте редактирование
Я имел это прежде, чем я отправил здесь, но это не работало. Можете ли вы указать, что было не так? `` `function listItem (item) {for (var i = 0; i <item.array.length; i ++) {var list = item.array [i]; list = document.createElement ('li'); document.getElementByClass ( 'коробка') AppendChild (список). console.log (список); }} `` `
Прежде всего, если вы уже написали код в попытке решить вашу проблему, рекомендуется включить его в свой пост, и мы поможем вам отладить его. Что касается того, почему это не работает, все, что вы делаете, это добавляете пустые узлы <li> . Ни в коем случае вы не даете им никакого контента. Вы присваиваете элементы из массива переменной list , но затем на следующей строке вы перезаписываете его и вместо этого превращаете в пустой <li> .

Thijs · Answer 3 · 2017-09-10T12-21-00.000Z

Вы можете использовать метод сокращения ES6 и шаблонные литералы. Вы можете использовать их следующим образом:

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>

Для получения дополнительной информации о сокращении см. Здесь: 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

Я не знаю много ES6. Что значит ${item} ?
Это буквенная строка шаблона, см. Ссылку в моем ответе для получения дополнительной информации.

sg28 · Answer 4 · 2018-07-06T20-47-00.000Z

Попробуйте это, также вы можете добавить в список

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>

Ori Drori · Answer 5 · 2017-09-10T11-17-00.000Z

Преобразуйте массив в строку, используя Array # join и используя теги элемента списка в качестве разделителей. Добавьте начальный и конечный теги вручную, используя конкатенацию строк (+). Назначьте строку элементу списка (ul#target), используя элемент # 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>