Tai yra plati apžvalga jQuery.each()
funkcija – viena iš svarbiausių ir dažniausiai naudojamų „jQuery“ funkcijų. Šiame straipsnyje išsiaiškinsime, kodėl ir kaip galite jį naudoti.
Key Takeaways
Kas yra jQuery.each()
jQuery kiekviena() funkcija naudojamas norint pereiti per kiekvieną tikslinio „jQuery“ objekto elementą – objektą, kuriame yra vienas ar daugiau DOM elementų ir kuris atskleidžia visas „jQuery“ funkcijas. Tai labai naudinga atliekant kelių elementų DOM manipuliavimą, taip pat atliekant atsitiktinių masyvų ir objektų savybių kartojimą.
Be šios funkcijos, jQuery suteikia pagalbinę funkciją tuo pačiu pavadinimu, kurią galima iškviesti prieš tai nepasirinkus ar nesukūrus jokių DOM elementų.
jQuery.each() Sintaksė
Pažiūrėkime, kaip veikia skirtingi režimai.
Šis pavyzdys pasirenka kiekvieną <div>
elementą tinklalapyje ir išveda kiekvieno iš jų indeksą ir ID:
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});
Galimas rezultatas būtų:
div0:header
div1:main
div2:footer
Ši versija naudoja jQuery's $(selector).each()
funkcija, priešingai nei naudingumo funkcija.
Kitame pavyzdyje parodytas naudingumo funkcijos naudojimas. Šiuo atveju objektas, per kurį reikia pereiti, pateikiamas kaip pirmasis argumentas. Šiame pavyzdyje parodysime, kaip pereiti per masyvą:
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
return (value !== 'three');
});
Paskutiniame pavyzdyje norime parodyti, kaip kartoti objekto savybes:
const obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function(key, value) {
console.log(value);
});
Visa tai susiveda į tinkamo atgalinio skambučio teikimą. Atgalinio skambinimo kontekstas, this
, bus lygus antrajam argumentui, kuris yra dabartinė vertė. Tačiau kadangi kontekstas visada bus objektas, primityvios reikšmės turi būti suvyniotos:
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
`
Tai reiškia, kad tarp vertės ir konteksto nėra griežtos lygybės.
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
`
Pirmasis argumentas yra dabartinis indeksas, kuris yra skaičius (masyvams) arba eilutė (objektams).
1. Pagrindinis jQuery.each() funkcijos pavyzdys
Pažiūrėkime, kaip funkcija jQuery.each() mums padeda kartu su jQuery objektu. Pirmajame pavyzdyje pasirenkami visi a
elementų puslapyje ir išveda juos href
atributas:
$('a').each(function(index, value){
console.log(this.href);
});
Antrasis pavyzdys išveda kiekvieną išorinį href
tinklalapyje (darant prielaidą, kad tik HTTP(S) protokolas):
$('a').each(function(index, value){
const link = this.href;
if (link.match(/https?:\/\//)) {
console.log(link);
}
});
Tarkime, kad puslapyje buvo šios nuorodos:
<a href="https://www.sitepoint.com/">SitePoint</a>
<a href="https://developer.mozilla.org">MDN web docs</a>
<a href="http://example.com/">Example Domain</a>
Antrasis pavyzdys išvestų:
https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/
Turėtume atkreipti dėmesį, kad DOM elementai iš „jQuery“ objekto yra „gimtosios“ formos atgalinio skambučio, perduodamo jQuery.each()
. Priežastis ta, kad jQuery iš tikrųjų yra tik DOM elementų masyvas. Naudojant jQuery.each()
, šis masyvas kartojamas taip pat, kaip būtų įprastas masyvas. Todėl suvyniotų elementų iš dėžutės neišimame.
Atsižvelgiant į mūsų antrąjį pavyzdį, tai reiškia, kad galime gauti elementą href
atributas rašant this.href
. Jei norėtume naudoti jQuery's attr()
metodu, turėtume iš naujo suvynioti elementą taip: $(this).attr('href')
.
2. jQuery.each() Masyvo pavyzdys
Dar kartą pažvelkime, kaip galima tvarkyti įprastą masyvą:
const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
console.log(`${index}: ${value}`);
});
Šis fragmentas išveda:
0:1
1:2
2:3
3:4
4:5
Nieko čia ypatingo. Masyve yra skaitiniai indeksai, todėl gauname skaičius pradedant nuo 0 ir kyla į viršų N-1kur N yra elementų skaičius masyve.
3. jQuery.each() JSON pavyzdys
Galime turėti sudėtingesnes duomenų struktūras, tokias kaip masyvai masyvuose, objektai objektuose, masyvai objektuose arba objektai masyvuose. Pažiūrėkime kaip jQuery.each()
gali mums padėti tokiais atvejais:
const colors = [
{ 'red': '#f00' },
{ 'green': '#0f0' },
{ 'blue': '#00f' }
];
$.each(colors, function() {
$.each(this, function(name, value) {
console.log(`${name} = ${value}`);
});
});
Šis pavyzdys išveda:
red =
green =
blue =
Įdėtą struktūrą tvarkome su įdėtu iškvietimu į jQuery.each()
. Išorinis skambutis tvarko kintamojo masyvą colors
; vidinis skambutis tvarko atskirus objektus. Šiame pavyzdyje kiekvienas objektas turi tik vieną raktą, tačiau apskritai bet koks skaičius gali būti sprendžiamas naudojant šį kodą.
4. jQuery.each() klasės pavyzdys
Šiame pavyzdyje parodyta, kaip pereiti per kiekvieną elementą su priskirta klase productDescription
nurodyta toliau pateiktame HTML:
<div class="productDescription">Red</div>
<div>Pink</div>
<div class="productDescription">Orange</div>
<div class="generalDescription">Teal</div>
<div class="productDescription">Green</div>
Mes naudojame each()
pagalbininkas vietoj each()
metodą parinkiklyje.
$.each($('.productDescription'), function(index, value) {
console.log(index + ':' + $(value).text());
});
Šiuo atveju išvestis yra tokia:
0:Red
1:Orange
2:Green
Neturime įtraukti indekso ir vertės. Tai tik parametrai, padedantys nustatyti, kurį DOM elementą šiuo metu kartojame. Be to, pagal šį scenarijų galime naudoti ir patogesnį each
metodas. Galime parašyti taip:
$('.productDescription').each(function() {
console.log($(this).text());
});
Ir mes gausime tai konsolėje:
Red
Orange
Green
Atminkite, kad įpakuojame DOM elementą į naują „jQuery“ egzempliorių, kad galėtume naudoti „jQuery“ text()
metodas gauti elemento teksto turinį.
5. jQuery.each() Vėlavimo pavyzdys
Kitame pavyzdyje, kai vartotojas spusteli elementą su ID 5demo
visi sąrašo elementai iš karto bus nustatyti į oranžinę spalvą.
<ul id="5demo">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Po nuo indekso priklausančio delsos (0, 200, 400… milisekundėmis) panaikiname elementą:
$('#5demo').on('click', function(e) {
$('li').each(function(index) {
$(this).css('background-color', 'orange')
.delay(index * 200)
.fadeOut(1500);
});
e.preventDefault();
});
Išvada
Šiame įraše parodėme, kaip naudoti jQuery.each()
funkcija, skirta kartoti DOM elementus, masyvus ir objektus. Tai galinga ir laiką taupanti maža funkcija, kurią kūrėjai turėtų turėti savo įrankių rinkiniuose.
Ir jei „jQuery“ jums netinka, galbūt norėsite naudoti „JavaScript“ savąją versiją Object.keys() ir Masyvas.prototype.forEach() metodus. Taip pat yra tokių bibliotekų kaip kiekvienam kurios leidžia kartoti į masyvą panašaus objekto arba į žodyną panašaus objekto raktinių reikšmių poras.
Prisiminti: $.each()
ir $(selector).each()
yra du skirtingi metodai, apibrėžti dviem skirtingais būdais.
Šis populiarus straipsnis buvo atnaujintas 2020 m., kad atspindėtų dabartinę geriausią praktiką ir atnaujintų išvadų patarimus dėl vietinių sprendimų naudojant šiuolaikinę „JavaScript“. Norėdami gauti daugiau žinių apie JavaScript, skaitykite mūsų knygą, JavaScript: Ninja naujokas, 2-asis leidimas.
DUK apie jQuery's each()
Funkcija
.each()
funkcija „jQuery“?The .each()
Funkcija „jQuery“ naudojama norint kartoti DOM elementų rinkinį ir atlikti konkretų veiksmą su kiekvienu elementu.
.each()
funkcija „jQuery“?Galite naudoti .each()
funkciją pasirinkdami elementų rinkinį naudodami jQuery parinkiklį ir tada iškviesdami .each()
apie tą pasirinkimą. Pateikiate atgalinio skambinimo funkciją, kuri apibrėžia veiksmą, kuris turi būti atliktas su kiekvienu elementu.
.each()
?Atgalinio skambinimo funkcija priima du parametrus: index
(dabartinis kolekcijos elemento indeksas) ir element
(dabartinis DOM elementas kartojamas).
index
parametras .each()
atgalinio skambučio funkcija?Galite naudoti index
parametras, skirtas sekti esamo elemento padėtį kolekcijoje, o tai gali būti naudinga atliekant sąlyginius veiksmus ar kitas operacijas.
.each()
funkcija?Įprasti naudojimo atvejai apima elementų sąrašo kartojimą, kad būtų galima manipuliuoti jų savybėmis, reikšmėmis ar stiliais, ir atlikti pasirinktinius veiksmus su kiekvienu kolekcijos elementu.