Блог

Главная - Вопросы по программированию - есть ли более быстрый способ отображения каждого индекса массива

есть ли более быстрый способ отображения каждого индекса массива

#javascript #html #jquery

Вопрос:

я создаю функцию, которая создаст элемент p для каждого элемента в массиве

   const liArray = ["hello", "hi", "hello", "test", "hey"];

  const parentElement= document.getElementById("myDiv");
  const index1 = liArray.slice(-1);
  const p = document.createElement("p");
  p.innerHTML = "1. "   index1;
  parentElement.appendChild(p);
  
  const index2 = liArray.slice(-2, -1);
  const p2 = document.createElement("p");
  p2.innerHTML =  "2. "   index2;
  parentElement.appendChild(p2);
  
  const index3 = liArray.slice(-3, -2);
  const p3 = document.createElement("p");
  p3.innerHTML =  "3. "   index3;
  parentElement.appendChild(p3);
   
  const index4 = liArray.slice(-4, -3);
  const p4 = document.createElement("p");
  p4.innerHTML =  "4. "   index4;
  parentElement.appendChild(p4);
 
  const index5 = liArray.slice(-5, -4);
  const p5 = document.createElement("p");
  p5.innerHTML =  "5. "   index5;
  parentElement.appendChild(p5);

так что результатом этого будет

 1. hello
2. hi
3. hello
4. test
5. hey

и мне интересно, есть ли более быстрый способ сделать это вместо того, чтобы вручную нарезать массив и создавать подобные элементы, что занимает много времени, особенно если в массиве много элементов

Комментарии:

1. Зацикливайтесь на элементах liArray и создайте элемент p внутри цикла. Затем добавьте его в родительский

Ответ №1:

Используется Array.prototype.forEach() для перебора каждого элемента массива.

Попробуйте это

 const liArray = ["hello", "hi", "hello", "test", "hey"];

const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  var elm = document.createElement('p');
  elm.innerHTML = `${index   1}. ${currentValue}`;
  parentElement.appendChild(elm);
}); 
 <div id="myDiv"></div>

Комментарии:

1. привет, у меня есть еще один вопрос, что делать, если я хочу добавить класс ко всем элементам? как я могу это сделать

Ответ №2:

Вы также можете использовать фрагмент документа. Выполните цикл по массиву и добавьте вновь созданный p элемент к фрагменту.

При добавлении ряда элементов в DOM предпочтительнее использовать фрагментацию документа.

 const liArray = ["hello", "hi", "hello", "test", "hey"];

var fragment = new DocumentFragment()
const parentEl = document.getElementById("parent");

liArray.forEach(function(currentValue, index){
  var elm = document.createElement('p');
  elm.innerHTML = `${index   1}. ${currentValue}`;
  fragment.appendChild(elm);
});

parentEl.appendChild(fragment) 
 <div id="parent"></div>

Ответ №3:

Вы можете использовать map для массива.

смотрите здесь: https://www.w3schools.com/jsref/jsref_map.asp

Метки: