Форум

helphelp · #1 (**permalink**) 10.06.2016, 04:24

Здрасьте. Подскажите пожалуйста каким образом можно подсчитать 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 · #2 (**permalink**) 10.06.2016, 04:56

Если говорить про id то предполагается что он один на странице, других с таким же именем быть не должно
Если речь о классах то так можно посчитать

var sum = document.getElementsByClassName("myClass").length;

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

pureJS · #3 (**permalink**) 10.06.2016, 20:43

Сообщение от helphelp

Здрасьте. Подскажите пожалуйста каким образом можно подсчитать 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>

рони · #4 (**permalink**) 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 · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript