1

У меня есть div, внутри которого много divов, и есть некоторые с id #red, они разбросаны.

Можно как-то посчитать сколько #red на странице, и вывести результат в

<.h>Количество: [число]<./h>?

.status {
  background: rgb(32, 32, 32);
  background: linear-gradient(145deg, #141414, #2d2d2d);
  width: 300px;
  height: 100px;
  margin-right: 100px;
  border-radius: 15px;
  padding: 0;
  -moz-box-shadow: 0 0 2px #000000a5;
  -webkit-box-shadow: 0 0 2px#000000a5;
  box-shadow: 0 0 5px #000000a5;
  color: #fff;
}
.status h1 {
display: flex;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 10px;
  font-size: 20px;
}
<div class="status">
 <h1>Количество: [число]</h1>

</div>

 <div class="yama">

    <div class="divTable yama_block">
       <div class="divTableBody">
        <!---1-->
        <div class="divTableRow">   
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div class="divTableCell">&nbsp;</div>
        <div class="divTableCell">&nbsp;</div>
        </div>
       </div>
     </div>
</div>

1
  • 3
    А не хорошо использовать больше одного идентификатора, т.е. id с определенным названием должен быть один. Лучше используй класс или data-id например. Потом уже document.querySelectorAll("[data-id='red']"). 5 фев 2021 в 23:25

1 ответ 1

6

const status = document.querySelector('.status').querySelector('h1');
const redDivs = document.querySelectorAll('#red');

status.textContent += redDivs.length;
.status {
  background: rgb(32, 32, 32);
  background: linear-gradient(145deg, #141414, #2d2d2d);
  width: 300px;
  height: 100px;
  margin-right: 100px;
  border-radius: 15px;
  padding: 0;
  -moz-box-shadow: 0 0 2px #000000a5;
  -webkit-box-shadow: 0 0 2px#000000a5;
  box-shadow: 0 0 5px #000000a5;
  color: #fff;
}
.status h1 {
display: flex;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 10px;
  font-size: 20px;
}
<div class="status">
 <h1>Количество: </h1>

</div>

 <div class="yama">

    <div class="divTable yama_block">
       <div class="divTableBody">
        <!---1-->
        <div class="divTableRow">   
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div id="red" class="divTableCell">&nbsp;</div>
        <div class="divTableCell">&nbsp;</div>
        <div class="divTableCell">&nbsp;</div>
        </div>
       </div>
     </div>
</div>

P.S. id - это уникальный селектор, он должен использоваться только для одного элемента, в данном случае лучше применять class

Ваш ответ

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

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