Quiero crear una función llamada con un solo parámetro que acepte cualquier selector de CSS válido mediante el método querySelectorAll.
La función debe devolver dos métodos para imitar .css y .html de jq.
Me estoy tirando de los pelos con este. ¿Alguien puede ayudar? Esto es todo lo que he encontrado hasta ahora y no puedo resolverlo:
const $ = (selector) => { let element = document.querySelectorAll(selector); return { html: function(content) { element.innerHTML = content; } } };Dado que está recogiendo una lista de nodos , necesita encontrar alguna forma de iterar sobre ellos. Guarde su consulta en su objeto devuelto, agregue un nuevo método llamado loop que puede aceptar una devolución de llamada y luego iterar sobre los elementos recuperados por la consulta con la devolución de llamada proporcionada por html y css . Nota: return this significa que puede encadenar métodos como lo permite jQuery. Simplemente devuelve el objeto de nuevo.
function $(selector) { return { // Cache the query query: document.querySelectorAll(selector), // `loop` accepts a function (callback) // and calls it on each element in the query loop: function (cb) { this.query.forEach(el => cb(el)); }, // Call `loop` and for each element change the content html: function(content) { this.loop(el => el.innerHTML = content); return this; }, // Call `loop` and for each element change the style css: function(prop, value) { this.loop(el => el.style[prop] = value); return this; } } }; // Get all the divs with red class properies $('div.red') .html('Updated') .css('background-color', 'red') .css('color', 'white'); <div>1</div> <div class="red">2</div> <div>3</div> <div class="red">4</div>