Здравствуйте! На странице множество div-ов одного и тогоже класса, не подскажете, как определить их число на javascript?
5 ответов
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
//}
Функция пересечения массивов взята отсюда
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 равно нужному классу.
-
-
Парсер в норме :)– user3545Commented 23 окт. 2012 в 16:10
для jquery это будет просто:
alert( $('div.myClass').length );
-
1
-
-
1меняется в корне, т.к. если селектор будет просто
.selector
. то Sizzle выполнет обычныйgetElementsByClassName
, а если нет, то будет выполненquerySelectorAll
, который более медленный– SpectreCommented 23 окт. 2012 в 19:42
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>
А не быстрее ли будет искать сначала по классу, а потом по тегу?
els = document.getElementsByClassName('clear');
length = els.length;
count = 0;
for (;length--;) {
count += els[length].tagName == 'DIV' ? 1 : 0;
}
return count;
-
1Во первых - getElementsByClassName не кроссбраузерно, в отличии от getElementsByTagName, во вторых: > var? не, не слышал– user3545Commented 24 окт. 2012 в 10:55
-
> getElementsByClassName не кроссбраузерно это печально. > var? не, не слышал лень писать всю функцию. Commented 24 окт. 2012 в 11:03
-
@technobulka а комментарий не лень?..– user3545Commented 24 окт. 2012 в 11:06
-
по-моему вы изобрели
reduce
Array.prototype.reduce.call( document.getElementsByClassName('clear'), function(acc,el){ return acc+(el.tagName == 'DIV' ? 1 : 0); }, 0 );– SpectreCommented 24 окт. 2012 в 11:09 -