Как вывести innerHTML не в один а в несколько одинаковых div?

156

03 ноября 2019, 04:10

guide = document.querySelector('.guide'); 
icon = document.querySelector('.nm'); 
 
str = guide.innerHTML; 
 
icon.innerHTML = str.substring(0, 2);

<article class="rd-guides"> 
  <ul> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Alica Crewer</p> 
    </li> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Brad Morison</p> 
    </li> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Oleg Bykovis</p> 
    </li> 
  </ul> 
</article>

Знаете в мессенджерах, если у абонента нет аватарки, выводится первые буквы имени и фамилии (или, что указано). Я же просто вывожу в div первые две буквы, с которых начинается слово. Мне нужно, что бы отображалось в нескольких div. В моем случае - в трех. Выводится только в первый. Как вывести во все которые имеют одинаковый класс?

Answer 1

/* 
document.querySelectorAll('.rd-guides li').forEach(item => { 
  item.querySelector(".nm").textContent =  
    item.querySelector(".guide").textContent.substring(0, 2); 
}); 
*/ 
 
// find all li-s inside .rd-guides 
var listItems = document.querySelectorAll('.rd-guides li'); 
for (var i = 0; i < listItems.length; i++) { 
  // for each item 
  var item = listItems[i]; 
  // find .guide and .nm inside it 
  var nm = item.querySelector(".nm"); 
  var guide = item.querySelector(".guide"); 
  // set text inside nm 
  nm.textContent = guide.textContent.substring(0, 2); 
}

<article class="rd-guides"> 
  <ul> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Alica Crewer</p> 
    </li> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Brad Morison</p> 
    </li> 
    <li> 
      <p class="nm"></p> 
      <p class="guide">Oleg Bykovis</p> 
    </li> 
  </ul> 
</article>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменить метод в зависимости от cookies

Необходимо, чтобы метод возвращал { device_id: device_id } если в cookies есть строка device_idПодскажите, пожалуйста, как это лучше реализовать в данном случае?

136

javascript