Een Heleboel Opties voor Looping Over querySelectorAll NodeLists

0
18

Een gemeenschappelijke nodig bij het schrijven van vanille JavaScript is om te zoeken naar een selectie van elementen in de DOM en loop over hen. Bijvoorbeeld, het vinden van exemplaren van een knop en het bevestigen van een klik-handler.

const toetsen = document.querySelectorAll(“.js-doe-ding”);
// Er kan een willekeurig aantal van deze!
// Moet ik loop over hen en bevestig met een klik op handler.

Er zijn ZO VEEL manieren om te gaan over. Laten we gaan via hen.

forEach

forEach is normaal voor arrays, en interessant, wat weer afkomstig is van querySelectorAll is niet een array, maar een NodeList. Gelukkig zijn de meeste moderne browsers ondersteunen het gebruik van forEach op NodeLists toch.

knoppen.forEach((knop) => {
knop.addEventListener(‘klik’, () => {
console.log(“forEach gewerkt”);
});
});

Als je bang bent dat forEach werkt mogelijk niet op uw NodeList, je zou kunnen verspreiden in een matrix eerste:

[knoppen…].forEach((knop) => {
knop.addEventListener(‘klik’, () => {
console.log(“spread forEach gewerkt”);
});
});

Maar ik ben eigenlijk niet zeker of dat helpt niets want het lijkt mij een beetje onwaarschijnlijk er zijn browsers die het ondersteunen verspreidt maar niet forEach op NodeLists. Misschien krijgt raar als transpiling wordt betrokken, al weet ik veel. Één van beide manier, het verspreiden is leuk in het geval u wilt om iets anders te gebruiken array-specifieke, graag .kaart(), .(filter), of .het verminderen van().

Een iets oudere methode is om een kabel in de matrix natuurlijke forEach met deze kleine hack:

[].forEach.bel(knoppen (knop) => {
knop.addEventListener(‘klik’, () => {
console.log(“array forEach gewerkt”);
});
});

Todd Motto noemde deze methode vrij hard, dus geadviseerd worden. Hij beval de bouw van uw eigen methode (bijgewerkt voor ES6):

const forEach = (array, callback, scope) => {
for (var i = 0; i < array.lengte; i++) {
terugbellen.bel(scope, i, matrix[i]);
}
};

…die we zouden gebruiken zoals deze:

forEach(toetsen, (index, knop) => {
console.log(“onze eigen functie werkte”);
});

voor ..

Browser ondersteuning voor .. loops ziet er best goed en dit lijkt me een super schoon syntaxis voor mij:

voor (const knop van de knoppen) {
knop.addEventListener(‘klik’, () => {
console.log(“voor .. werkte”);
});
}

Het maken van een array meteen

const knoppen = Array.prototype.segment.van toepassing(
document.querySelectorAll(“.js-doe-ding”)
);

Nu kunt u alle normale array functies.

knoppen.forEach((knop) => {
console.log(“apply gewerkt”);
});

Oud-for-lus

Als u maximaal mogelijke steun van de browser, er is geen schaamte in een oude klassieker voor loop:

voor (i = 0; i < knoppen.lengte; ++i) {
knoppen[i].addEventListener(‘klik’, () => {
console.log(“for-lus gewerkt”);
});
}

Bibliotheken

Als u het gebruik van jQuery, je hoeft zelfs niet te storen….

$(“.knoppen”).op(“klik”, () => {
console.log(“jQuery werkt”);
});

Als u een Reageren/JSX setup, je hoeft niet na te denken over dit soort van binding.

Lodash heeft een _.forEach, die vermoedelijk helpt met oudere browsers.

_.forEach(knoppen (knop ingedrukt) => {
console.log(“lodash gewerkt”);
});

Poll

peeps:

const els = document.querySelectorAll(“.foo”);

// die loop gebruik je? een van deze? andere?

— Chris Coyier (@chriscoyier) November 7, 2018

Ook hier is een Pen met al deze opties.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de social sharing links boven, beveiliging en back-ups, Markdown ondersteuning, site search, het reactieformulier, positionering, sociale netwerk-verbindingen, en meer!