Tengo una lista de nodos de elementos en js que se recopilaron consultando muchas clases y luego una declaración "para" que recorre la lista. Lo que necesito es una forma rápida de una línea para devolver qué clase se seleccionó cada elemento dentro del bucle para poder realizar una acción basada en eso. Aquí está mi código intermitente:
var nodeList = document.querySelectorAll(".class1, .class2, .etc..."); for (var i = 0; i < nodeList.length; i++) { var classOfCurrentDiv = [...] //perform action using classOfCurrentDiv }Sé que puedo hacer algo como
if (nodeList[i].classList.contains(class1)) { //perform code }y repita eso para cada clase, o haga una comparación de la lista de clases del elemento y la lista de clases que estoy buscando, pero todo lo que necesito hacer es insertar el nombre de la clase en una cadena, así que prefiero una sola solución de línea para obtener la clase que devolvió el elemento en la consulta. La clase que devolvió el elemento puede no ser la única clase de ese elemento, por lo que no puedo simplemente extraer la lista de clases del elemento.
Esto es probablemente muy simple y solo estoy en blanco sobre cómo hacerlo, pero házmelo saber. La lista de clases consultadas estará codificada y la lista de clases de cada elemento solo contendrá una de las clases consultadas si eso ayuda.
¡Gracias!
Puede usar Element.matches para hacer esto con un trazador de líneas.
Element.matches(selector) le permite especificar un selector css a un elemento y regresará si el elemento coincide con el selector. Dado que su selector resulta ser una lista de clases separadas por comas, puede encontrar qué clase coincidió con el elemento en particular dividiendo el selector en comas en una matriz, recorra esa matriz como cada clase a través del filter y filtre los elementos que no juego. Ejemplo completo a continuación:
function classOfCurrentDiv(div, selector) { return selector.split(", ").filter(_class => div.matches(_class))[0]; } const selector = ".class1, .class2, .class3"; const nodeList = document.querySelectorAll(selector); for (let i = 0; i < nodeList.length; i++) { console.log("selector of element " + i + ":", classOfCurrentDiv(nodeList[i], selector)); } <div class="class1 foo"></div> <div class="class3 bar"></div> <div class="class2 baz"></div>Algo como eso ?
const classList = [".ps-fixed", ".class1", ".class2"] const nodeList = document.querySelectorAll(classList) nodeList.forEach((node) => { classList.forEach((ClassMatch) => { if (node.classList.contains(ClassMatch.slice(1))) { //slice 1 to remove the "." before the class names in the array console.log(node) } }) });