Tutorial MooTools pasul 3 Multimi

Astazi vom discuta un pic despre multimi si cum pot acestea fi folosite in concordanta cu elementele DOM-ului.

Functia .each(); este cea mai buna solutie cand ai de a face cu multimile pentru ca ofera o modalitate simpla de a itera printr-o lista de elemente. Sa folosim un exemplu cu functia alert() pe care am mai folosit-o anterior, si sa emitem o alerta pentru fiecare div din codul html:

$$('div').each(function() {
   alert('acesta este un div');
});

Codul de mai jos va crea 3 casute de alerta, una pentru fiecare div:

Primul Div
Al Doilea Div
Al Treilea Div

De asemenea, precum am discutat in tutorialul trecut, poate fi folosita pentru multimi si functia getElements();:

$('elementulMeu').getElements('div').each(function() {
alert('acesta este un div');
});

Codul HTML este urmatorul:

Primul Div
Al Doilea Div
Al Treilea Div

O a treia metoda este de a trimite multimea catre o variabila, si apoi sa folositi functia .each(); pentru acea variabila:

//pentru inceput trebuie declarata acea variabila cu "var NUME_VARIABILA"
//apoi, se foloseste semnul "=" pentru a defini ce primeste aceasta variabila
//in acest caz, e vorba de o multime de div-uri
var oVariabila = $('elementulMeu').getElements('div');
//astfel, aceasta variabila poate fi folosita ca un selector al multimii
oVariabila.each(function() {
alert('acesta este un div');
});

In principiu, vei dori sa iti separi functia de selector si de .each();. Despre functii vom vorbi mai multe ntr-un capitol urmator, dar pentru inceput sa folosim un mic exemplu:

var oVariabila = $('elementulMeu').getElements('div');
//pentru a crea o functie, se declara o variabila ca mai sus, care trebuie denumita
//dupa semnul egal, scrii "function()" pentru a declara variabila ca pe o functie
//in final, scrii codul funciei intre acolade
var functiaMea = function() {
alert('acesta este un div');
};
//apoi functia trebuie apelata in interiorul lui .each();.
oVariabila.each(functiaMea);

Trebuie remarcat faptul ca atunci cand apelezi o functie in interiorul lui .each();, renunti la parantezele acesteia.

Cu ajutorul MooTools, o multime poate fi usor copiata folosind functia $A();. In exemplul urmator, vom crea o noua multime, cum am invatat deja, apoi vom face o copie a acesteia:

//creaza variabila pentru multime
var oVariabila = $('elementulMeu').getElements('div');
//creaza o noua variabila, numita "variabilaCopie," apoi aloca noii variabile o copie a "oVariabila"
var variabilaCopie = $A(oVariabila);

In continuare, voi prezenta cateva functii pentru extragerea unui element dintr-o multime, adaugarea sau stergerea sa:

  • .getLast(); va returna ultimul element dintr-o multime
    //la inceput, cream multimea
    var oVariabila = $('elementulMeu').getElements('div');
    //apoi extragem ultimul element al acesteia
    var ultimulElement = oVariabila.getLast();
    //variabila "ultimulElement" va reprezenta astfel ultimul element al multimii
    
  • .getRandom(); va returna un element random dintr-o multime
    //la inceput, cream multimea
    var oVariabila = $('elementulMeu').getElements('div');
    //apoi extragem un element al acesteia
    var randomElement = oVariabila.getRandom();
    //variabila "randomElement" va reprezenta astfel un element random al multimii
    
  • .include(); - cu ajutorul acesteia se poate adauga un nou element in multime. Selectorul elementului trebuie plasat in cadrul ".include()" si atasat multimii.
    primul div
    al doilea div
    adauga in multime
    Folosind codul HTML de mai sus, putem crea o multime cum am facut anterior apeland toate div-urile care sunt "copii" ai div-ului "elementulMeu"
    var oVariabila = $('elementulMeu').getElements('div');
    
    Pentru a adauga un alt element in multime, intai adauga elementul pe care-l doresti intr-o variabila, si apoi foloseste metoda .include();
    //la inceput adauga elementul tau intr-o variabila
    var variabilaNoua = $('adauga_in_multime'); 
    //apoi include variabila in multime
    oVariabila.include(variabilaNoua);
    
    Acum, multimea contine atat div-urile cat si elementul span.
  • .combine(); functioneaza la fel ca .include(); doar ca permite adaugarea unei multimi la cea existenta fara a se pune problema duplicarii continutului. Presupunand ca avem doua multimi din urmatorul cod HTML:
    primul div
    al doilea div
    adauga in multime adauga in multime inca o data adauga in multime de asemenea
    Vom putea apoi construi urmatoarele multimi:
    //cream o multime la fel ca inainte
    var oVariabila= $('elementulMeu').getElements('div'); 
    //apoi creem o noua multime cu toate elementele din .nume_clasa
    var variabilaNoua = $$('.nume_clasa');
    
    Apoi, putem folosi .combine(); pentru a combina cele doua multimi, iar metoda se va ocupa de continutul duplicat in locul nostru:
    //apoi unim var1 cu var2
    oVariabila.combine(variabilaNoua);
    
  • .erase(); sterge toate aparitiile unui element dintr-o multime
    oVariabila.erase(element);
    
  • .empty(); goleste o multime
    oVariabila.empty();
    

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.

1Comentarii la "Tutorial MooTools pasul 3 Multimi "

  1. Bogdan spune:

    Mc, m-a salvat acest tutorial :)

Adauga Comentariu

Mesaj

Trimite