2

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. В моем случае - в трех. Выводится только в первый. Как вывести во все которые имеют одинаковый класс?

1 ответ 1

2

/*
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>

2
  • Спасибо вам большое Commented 2 мар. 2019 в 13:17
  • @Ученик Пожалуйста. Успехов!
    – user176262
    Commented 2 мар. 2019 в 13:18

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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