1
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. Направьте в правильную сторону. Код готовый писать не обязательно :)

4
  • Попробуйте так sFuncText[i].innerHTML = S_FUNC[i];. Хотя, лучше конечно сделать объект, вместо массива. 29 ноя 2019 в 8:18
  • Да, оно вывелось туда, но теперь в item весь массив, а нужно, чтобы в первом li был первое описание и тд... спасибо)
    – hitFM
    29 ноя 2019 в 8:21
  • 3
    Вы не правильно скопировали код, видимо. Посмотрите внимательно и найдите у себя расхождение с моим кодом. 29 ноя 2019 в 8:24
  • Спасибо всем, все варианты отличные, я уже написал с ваших вариантов свой подходящий код!)
    – hitFM
    29 ноя 2019 в 9:17

2 ответа 2

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>

1

Создаст список на с количеством элементов из массива 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)
})
<ul id="list"></ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.