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

157
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>

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

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

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

137
Как сделать чтобы прокрутка мыши не действовала на определенном article?

Как сделать чтобы прокрутка мыши не действовала на определенном article?

кому-то вечера или ночи, все вам ребята! Я постараюсь объяснить, чтобы вы меня понялиИтак в качестве образца я залил на тестовый домен html сайт

123
MySQL вывод значений

MySQL вывод значений

Как вывести данные, где col1 < col2

137