Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подсчитать кол-во ID (https://javascript.ru/forum/misc/63485-podschitat-kol-vo-id.html)

helphelp 10.06.2016 04:24

Подсчитать кол-во ID
 
Здрасьте. Подскажите пожалуйста каким образом можно подсчитать ID на странице?

Например у меня есть следующее:
<i id='1'></i>
<i id='2'></i>
<i id='3'></i>
<i id='2'></i>
<i id='1'></i>

Что мне нужно:
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'1'
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'2'
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'3'

Bond 10.06.2016 04:56

Если говорить про id то предполагается что он один на странице, других с таким же именем быть не должно
Если речь о классах то так можно посчитать
var sum = document.getElementsByClassName("myClass").length;

В sum запишется количество 10, 20, 35.... Короче сколько будет классов с указанным называнием сколько и запишется.

pureJS 10.06.2016 20:43

Цитата:

Сообщение от helphelp (Сообщение 418960)
Здрасьте. Подскажите пожалуйста каким образом можно подсчитать ID на странице?

Например у меня есть следующее:
<i id='1'></i>
<i id='2'></i>
<i id='3'></i>
<i id='2'></i>
<i id='1'></i>

Что мне нужно:
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'1'
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'2'
Нужно задать innerHTML определенному <div'y: кол-во элементов с id'3'


helphelp, ID нужно задавать все разные, иначе при обращению по ID будет всегда выбираться только 1-ый елемент с таким ID.

Посчитать можно так:

Код:

<div>
        <i id="h1"></i>
        <i id="h2"></i>
        <i id="h3"></i>
        <i></i>
        <i></i>
</div>
<script type="text/javascript">
var elems = document.getElementsByTagName('i');
var count = 0;
for (var i = 0; i < elems.length; i++)
{
        if(elems[i].id != '')
                count++;
}
alert(count);
</script>


рони 10.06.2016 21:22

helphelp,
id уникально, лучше использовать class или data-id
... но если очень хочется, раскомментируйте строку ниже
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    i:after{
      content: attr(id);
    }
 </style>

  <script>
     window.addEventListener('DOMContentLoaded', function() {
       var nodes = document.querySelectorAll('i'), obj = {};
          [].forEach.call( nodes, function(i) {
              var id = i.dataset.id;
              //var id = i.id;
            id && (obj[id]++|| (obj[id] = 1))  ;
          });
          Object.keys(obj).forEach(function (id) {
    var div = document.createElement("div");
    div.innerHTML = 'кол-во элементов с "id='+ id + '" : '+ obj[id]
    document.body.appendChild(div)

});

         });
  </script>
</head>

<body>
 <i id='1' data-id='1'></i>
 <i id='2' data-id='2'></i>
 <i id='3' data-id='3'></i>
 <i id='2' data-id='2'></i>
 <i id='1' data-id='1'></i>


</body>
</html>

EmperioAf 10.06.2016 21:33

<body>
    <div id="a"></div>
    <i id='a'></i>
<i id='b'></i>
<i id='d'></i>
<i id='c'></i>
<i id='d'></i>
    <script>
var children = document.body.children;
var idMap = {};
for (var i = 0; i < children.length; i++) {
  if (children[i].id){
  var el = document.querySelector('#'+children[i].id);
  idMap[el.id] = idMap[el.id] ? idMap[el.id] + 1 : 1;
  }
}

console.log(idMap);
    </script>

  </body>


Часовой пояс GMT +3, время: 06:24.