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.