3

Estoy tratando separando un arreglo de div, por ejemplo:

[div.clase1, div.clase1.clase2, div.clase1]

Quiero que quede así:

array1 = [div.clase1, div.clase1]
array2 = [div.clase1.clase2]

Quiero en un arreglo aparte poder guardar los elementos que contengan solo la clase1 y clase2, pero en otro arreglo, quiero poder guardar solo los que tienen clase1.

Mi código es:

document.querySelectorAll('.clase1.clase2') // para las dos clases

document.querySelectorAll('.clase1') // para la clase1,

Cuando hago el segundo selector me trae todos los div, y solo necesito que tengan la clase1. ¿Alguien puede ayudarme?

1
  • 1
    Hola nayeli, te damos la bienvenida a Stack Overflow en español. Ésta es una primera pregunta interesante. No te olvides de completar el recorrido de bienvenida para aprender más sobre el sitio y su funcionamiento general (y así ganarás tu primera medalla). Saludos.
    – Alvaro Montoro
    el 21 may. 2019 a las 18:21

1 respuesta 1

6

El selector que toma los elementos con ambas clase ya lo tiene y es correcto:

document.querySelectorAll('.clase1.clase2')

El problema con el otro selector es que trae elementos que además de la clase1 tienen también la clase2. Para evitarlo puedes usar :not que sirva para restringir el alcance y que no se seleccionen los elementos que cumplan con la condición especificada. Así puedes hacer algo como esto:

document.querySelectorAll('.clase1:not(.clase2)')

que seleccionará los elementos con clase1 que no son clase2.

Aquí te dejo un ejemplo:

const class1sin2 = document.querySelectorAll(".class1:not(.class2)");
const class1con2 = document.querySelectorAll(".class1.class2");

console.log(class1sin2);
console.log(class1con2);
<div class="class1">A</div>
<div class="class1 class2">B</div>
<div class="class1">C</div>


Ahora, si lo que quieres es seleccionar todos los elementos que tenga la clase1 y sólo la clase1 y ninguna más (ni la clase 2, ni la 3), utilizar :not() para eso puede no ser de mucha utilidad (porque no sabes los nombres de todas las clases y/o el selector sería largo y complejo).

En esos casos puedes usar un selector de atributo ([]) y seleccionar los elementos cuya clase sea exactamente clase1. Aquí puedes ver un ejemplo de cómo sería:

const class1sinOtras = document.querySelectorAll("[class='class1']");
const class1con2 = document.querySelectorAll(".class1.class2");

console.log(class1sinOtras);
console.log(class1con2);
<div class="class1">A</div>
<div class="class1 class2">B</div>
<div class="class1">C</div>
<div class="class1 class3">D</div>
<div class="class1">E</div>

4
  • Alvaro, y si quisiera los que son class1, pero ninguna otra clase atras? se puede? (si tuviera class1.class2 y class1.class3, hay algun tipo de comodin para esto?)
    – gbianchi
    el 21 may. 2019 a las 18:50
  • @gbianchi sí, se debería poder usando con selectores de atributo. Voy a probar y editar la respuesta
    – Alvaro Montoro
    el 21 may. 2019 a las 18:51
  • 1
    @gbianchi actualicé la respuesta para añadir esa posibilidad
    – Alvaro Montoro
    el 21 may. 2019 a las 18:55
  • Muchas gracias ! me ha servido mucho el 21 may. 2019 a las 19:12

Tu Respuesta

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

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