var sel = document.querySelectorAll('ul li a') sel[0] == // ELEMENT WITH div.bottom ul li a.box sel[1] == // ELEMENT WITH div.head ul li a.box var list = [ {css: 'a span', val:'1st'}, {css: 'div.bottom ul a', val:'2nd'}, {css: 'div.head li > a.box', val:'3rd'}, {css: 'div.head li a', val:'4th'} ] //desired result "sel[0] matches 2nd" "sel[1] matches 3rd,4th"Estoy tratando de encontrar todas las coincidencias de css selectorAll de una lista. Sé que puedo usar el bucle for anidado y recorrer tanto los selectores como la lista de esta manera
for (var i = 0; i < list.length; i++) { if (sel[0].matches(list[i].css)) { console.log(list[i].val); } }pero tratando de encontrar una mejor solución sin usar el bucle for anidado. ¿Cómo puedo mejorar este código?
Utilice el método filter() para obtener todos los elementos coincidentes de una matriz.
sel.forEach((el, i) => { let matches = list.filter(item => el.matches(item.css)); if (matches.length > 0) { console.log(`sel[${i}] matches ${matches.map(item => item.val).join(',')}`); } }