Tengo este código:
const all = document.querySelectorAll('div'); let variable = 'fruits'; all.forEach((item) => { if(item.classList.contains(variable)) { item.style.backgroundColor = 'red'; } }); <div class="fruits"> Fruits </div> <div class="fruits-green"> Green fruits </div>y me preguntaba si hay que usar classList.contains con una cadena/palabra parcialmente.
Obviamente, lo que estoy tratando de lograr es obtener un estilo de frutas verdes también, ya que contiene frutas -verdes
Sé que hay selectores de CSS para eso, pero dado que mi variable de frutas cambiará con otras funciones de JS, me gustaría que esto también sea Vanilla JS.
Cualquier consejo es muy apreciado. ¡Gracias!
Pude hacerlo funcionar usando
let variable = 'fruits'; const all = document.querySelectorAll('div[class*="'+variable+'"]'); all.forEach((item) => { item.style.backgroundColor = 'red'; }); <div class="fruits"> Fruits </div> <div class="fruits-green"> Green fruits </div>Gracias de nuevo @David
La propiedad classList es una DOMTokenList que es una cadena pero tiene métodos y propiedades similares a los métodos Array.
all ). Usaremos .flatMap() porque estamos tratando con múltiples etiquetas que pueden o no tener múltiples coincidencias. all.flatMap((div, idx) => {//....value de classList que devuelve una cadena delimitada por espacios de cada una de las clases de la etiqueta. let list = div.classList.value.split(' ');.filter() cada clase de cada etiqueta comparándola con .includes() list.filter(cls => cls.toLowerCase().includes('fruit')); const all = Array.from(document.querySelectorAll('div')); let output = all.flatMap((div, idx) => { let list = div.classList.value.split(' '); console.log(list) let matches = list.filter(cls => cls.toLowerCase().includes('fruit')); return [matches]; }) console.log(output); <div class="fruits fries"> Fruits fries </div> <div class="fruits-green fruity"> Green fruits fruit </div>