En este caso creo que no te merece la pena convertir el
string que te devuelve
className a un array. Lo más lógico (y eficiente) sería buscar en esa cadena lo que tú quieres con el
indexOf() o con la ayuda de expresiones regulares y la función
test().
Yo creo que el rendimiento lo tienes más eficiente en la función
test() de las expresiones regulares, que te devuelve el
boleano que buscas, menos código y más velocidad. Además nos quitamos el problema de si un nombre contiene a otro:
Imagínate dos clases de CSS, una que se llame
soyrojo y otra
nosoyrojo. Con el
indexOf() si fueras a buscar
soyrojo verías que lo encontraría en los elementos con esas dos clases: siempre se encuentra la cadena
soyrojo en su
className. Con las expresiones regulares no tienes ese problema gracias a los delimitadores de palabra "\b", que no podemos utilizar en
indexOf().
Luego quizás tengamos otro problemita (solventable) como saber si una clase está delante de otra. El equivalente a
indexOf() de las cadenas para usar expresiones regulares sería
search(). Así que con
search() puedes saber la posición que ocupa una clase en su
className. Imagínate ésta declaración:
Código HTML:
<style type="text/css">
.rojopeq { color:red; font-size:10px !important; }
.grande { font-size:80px; }
</style>
------
<span id="elSpan" class="rojopeq grande">hola</span> En teoría
grande suplanta los valores que haya podido dar
rojopeq al span, luego el span debería quedar en rojo y a 80px. Lo que pasa es que tenemos un
!important en la declaración de tamaño de
rojopeq, luego el span queda rojo y pequeño. Si queremos saber si
rojopeq está antes que
grande en la declaración usaríamos el útil
search().
Aqui te dejo el colmo de los colmos:
Código PHP:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
.rojopeq { color:red; font-size:10px !important; }
.grande { font-size:80px; }
</style>
<script type="text/javascript">
function tieneClase(elemento, clase) {
var pattern = new RegExp("\\b" + clase + "\\b");
return pattern.test(elemento.className);
}
function estaAntesUnoQueDos(elemento, clase1, clase2) {
var suClassname = elemento.className;
var pos1 = suClassname.search(clase1);
var pos2 = suClassname.search(clase2);
return pos1 < pos2; // no válido si pos1 fuera -1, comprobar que existen antes!
}
function soyRojoYpequeno(elemento) {
if( tieneClase(elemento, "rojopeq") && tieneClase(elemento, "grande") ) {
return estaAntesUnoQueDos(elemento, "rojopeq", "grande");
}
else
return false;
}
</script>
</head>
<body>
<span id="elSpan" class="rojopeq grande" >hola</span>
<br/>
<button type="button" onclick="alert( soyRojoYpequeno(document.getElementById('elSpan')) );" >
¿es el span rojo y pequeño?
</button>
</body>
</html>
Aunque si quisieras más efectividad supongo que
tieneClase(elemento, clase) debería ser
tieneClases(elemento, clase1, clase2, clase3, ..., claseN), pero no creo que varíe demasiado el tiempo de ejecución. Supongo que no estaremos hablando de 10 000 elementos ¿verdad?
Bueno, espero que te aclare lo que te he comentado.
Un saludo.
