1

Hola quisiera saber como puedo con Javascript PURO obtener nombres de clases CSS y poder mostrarlas en la consola sin repetir nombres desde una lista de nodos donde obtengo los elementos buscando la primer clase. Los elementos con la clase AAA siempre tienen 2 clases solamente: AAA y otra clase que varía y se repite: Con esta función veo las clases pero repetidas:

[].forEach.call(document.querySelectorAll('.AAA'), function(elem) {
    console.log(elem.className);
});


<span class"AAA BBB"></span>
<span class"AAA CCC"></span>
<span class"AAA DDD"></span>
<span class"AAA EEE"></span>
<span class"AAA FFF"></span>
<span class"AAA GGG"></span>
<span class"AAA BBB"></span>
<span class"AAA CCC"></span>
<span class"AAA DDD"></span>
<span class"AAA EEE"></span>
<span class"AAA FFF"></span>
<span class"AAA GGG"></span>

Quisiera poder ver en la consola todas los tipos de clases después de obtener todos los elementos con la clase "AAA", es decir algo asi:

BBB CCC DDD EEE FFF GGG

Tampoco me importa que se muestren ambas como AAA BBB, AAA CCC, etc.

Muchas gracias.

1 respuesta 1

2

por lo que entiendo seria algo asi (suponiendo que AAA va de primero siempre) :

let arr = [...document.getElementsByClassName("AAA")].map((element) => {
  let tempArr = element.className.split(' ') // separamos las classes del array
  tempArr.shift() // quitamos el primer elemento
  return tempArr // retornamos los demas elementos
})
arr =[].concat(...arr) // unimos todos los arrays en uno solo
console.log([...new Set(arr)]) // Generamos el array con valores únicos y lo escribimos
<span class="AAA BBB"></span>
<span class="AAA CCC"></span>
<span class="AAA DDD"></span>
<span class="AAA EEE"></span>
<span class="AAA FFF"></span>
<span class="AAA GGG"></span>
<span class="AAA BBB"></span>
<span class="AAA CCC"></span>
<span class="AAA DDD"></span>
<span class="AAA EEE"></span>
<span class="AAA FFF"></span>
<span class="AAA GGG"></span>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.