Foros del Web - Ver Mensaje Individual - Ocultar elementos de una lista según su clase

emprear · #2 (**permalink**) 17/02/2013, 07:41

También existe
document.getElementsByClassName()

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 
<script type="text/javascript">
//<![CDATA[
 
//versiones IE < 9
/*
window.onload=function(){
if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className){
        var tieneClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var todosLosElementos = document.getElementsByTagName("*");
        var resultados = [];
        var elementos;
        for (var i = 0; (elementos = todosLosElementos[i]) != null; i++) {
            var elementoClase = elementos.className;
            if (elementoClase && elementoClase.indexOf(className) != -1 && tieneClassName.test(elementoClase))
                resultados.push(elementos);
        }
        return resultados;
    }
}
}
*/
 
function que_clases(){
var a = document.getElementsByClassName('a');
var b = document.getElementsByClassName('b');
var c = document.getElementsByClassName('c');
alert('texto de primer elemento con clase a = ' + a[0].innerHTML);
alert('texto de primer elemento con clase b = ' + b[0].innerHTML);
alert('texto de segundo elemento con clase c = ' +c[1].innerHTML);
}
//]]>
</script>
</head>
<body>
<div>
<span style="cursor: pointer;" onclick="que_clases();"><b>Verificar</b></span>
<p class="a b c">texto</p>
<p class="a c">texto 2</p>
<p class="a b">texto 3</p>
</div>
<div>
<pre>
 
&lt;p class=&quot;a b c&quot;&gt;texto&lt;/p&gt;
&lt;p class=&quot;a c&quot;&gt;texto 2&lt;/p&gt;
&lt;p class=&quot;a b&quot;&gt;texto 3&lt;/p&gt;
</pre>
</div>
</body>
</html>

Como la función devuelve un conjunto de elementos, vas a tener que recorrer el array con un for

SAludos