0

Здравствуйте! На странице множество div-ов одного и тогоже класса, не подскажете, как определить их число на javascript?

1

5 ответов 5

3
function fn( el, className ) {
  var elements = document.getElementsByTagName(el);
  var total = 0;
  for( var i=-1; ++i < elements.length; ) {
    if( ~elements[i].className.search(className) ) {
      ++total;
    }
  }
  return total;
}

fn('div', 'someClassName')

// if (window.jQuery !== undefined) {
    $('div.someClassName').length
//}
1

Функция пересечения массивов взята отсюда

function across(a1, a2){ // a1, a2 - массивы одномерные
    var arez=new Array();
    if (a1.length==0 || a2.length==0) return arez var i=0,j; while (i<a1.length){   // для каждого элемента a1
      j=0
      while (j<a2.length){
        if (a1[i]==a2[j]) {
           arez.push(a1[i]);
           break;
        }
        j++;
      } i++;
  }
 return arez }

Теперь осталось найти пересечение массивов:

arr1= document.getElementsByTagName("div");
arr2= document.getElementsByClassName("class");

Функция document.getElementsByClassName не кроссбраузерна. Здесь кросс.

Еще можно получить все div и считать те у которых className равно нужному классу.

2
  • Какой-то глюк у местного парсера.
    – ReinRaus
    Commented 23 окт. 2012 в 15:27
  • Парсер в норме :)
    – user3545
    Commented 23 окт. 2012 в 16:10
1

для jquery это будет просто:

alert( $('div.myClass').length );
3
  • 1
    выберит не только дивы
    – Spectre
    Commented 23 окт. 2012 в 16:41
  • ну да, поправил ;) суть не меняется ;)
    – thunder
    Commented 23 окт. 2012 в 19:26
  • 1
    меняется в корне, т.к. если селектор будет просто .selector. то Sizzle выполнет обычный getElementsByClassName, а если нет, то будет выполнен querySelectorAll, который более медленный
    – Spectre
    Commented 23 окт. 2012 в 19:42
0

console.log(document.querySelectorAll("div.x").length)
<div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div><div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div><div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div><div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div><div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div><div class=x><div><div><div class=y><div></div><div class=x></div></div></div></div></div>

-1

А не быстрее ли будет искать сначала по классу, а потом по тегу?

els = document.getElementsByClassName('clear');
length = els.length;
count = 0;
for (;length--;) {
    count += els[length].tagName == 'DIV' ? 1 : 0;
}
return count;
5
  • 1
    Во первых - getElementsByClassName не кроссбраузерно, в отличии от getElementsByTagName, во вторых: > var? не, не слышал
    – user3545
    Commented 24 окт. 2012 в 10:55
  • > getElementsByClassName не кроссбраузерно это печально. > var? не, не слышал лень писать всю функцию. Commented 24 окт. 2012 в 11:03
  • @technobulka а комментарий не лень?..
    – user3545
    Commented 24 окт. 2012 в 11:06
  • по-моему вы изобрели reduce Array.prototype.reduce.call( document.getElementsByClassName('clear'), function(acc,el){ return acc+(el.tagName == 'DIV' ? 1 : 0); }, 0 );
    – Spectre
    Commented 24 окт. 2012 в 11:09
  • как видишь. Commented 24 окт. 2012 в 11:09

Ваш ответ

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

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