Массив, вывод в тег li по очереди

160

29 ноября 2021, 23:20

const S_FUNC = ['Описание 1', 'Описание 2', 'Описание 3', 'Описание 4'];

Не понимаю как по очереди засунуть в li каждое описание, вот к примеру чтобы получилось так:

<ul class="list">
    <li class="item">Описание блока 1</li>
    <li class="item">Описание блока 2</li>
</ul>
<ul class="list">
    <li class="item">Описание блока 3</li>
    <li class="item">Описание блока 4</li>
</ul>

Либо тут не массив нужен, а объект, чтобы было удобнее писать для каждого своё описание, не знаю...

Пытался что-то такое сотворить:

let sFuncText = document.body.querySelectorAll('.item');
for(let i = 0; i < S_FUNC.length; i++ ){
    sFuncText.innerHTML = S_FUNC[i];
}

Не силён в JS. Направьте в правильную сторону. Код готовый писать не обязательно :)

Answer 1

То, что вы хотите. Доработанный ваш пример.

const S_FUNC = ['Описание 1', 'Описание 2', 'Описание 3', 'Описание 4']; 
 
let sFuncText = document.body.querySelectorAll('.item'); 
 
for (let i = 0; i < S_FUNC.length; i++) { 
  sFuncText[i].innerHTML = S_FUNC[i]; 
}

<ul class="list"> 
  <li class="item">Описание блока 1</li> 
  <li class="item">Описание блока 2</li> 
</ul> 
 
<ul class="list"> 
  <li class="item">Описание блока 3</li> 
  <li class="item">Описание блока 4</li> 
</ul>

Но лучше сделать вот так.

const S_FUNC = { 
  ul1: ['Описание 1', 'Описание 2'], 
  ul2: ['Описание 3', 'Описание 4'] 
}; 
 
let sFuncText = document.body.querySelectorAll('.item'); 
 
const uls = document.querySelectorAll('.list').forEach(ul => { 
  ul.querySelectorAll('.item').forEach((li, i) => { 
    li.innerText = S_FUNC[ul.id][i]; 
  }); 
});

<ul class="list" id="ul1"> 
  <li class="item">Описание блока 1</li> 
  <li class="item">Описание блока 2</li> 
</ul> 
 
<ul class="list" id="ul1"> 
  <li class="item">Описание блока 3</li> 
  <li class="item">Описание блока 4</li> 
</ul>

Answer 2

Создаст список на с количеством элементов из массива S_FUNC

const S_FUNC = ['Описание 1', 'Описание 2', 'Описание 3', 'Описание 4']; 
const list = document.getElementById('list'); 
S_FUNC.forEach(item=>{ 
  let li = document.createElement('li') 
  li.innerText = item 
  list.append(li) 
})