Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(12) Pole

Co je to pole?

Pole je soubor libovolných proměnných, čísel nebo třeba další polí, obvykle usopřádaných podle nějakých určitých vlastností. Pole se vytváří velmi jednoduše.

var pole = [ 1, 9, 3, -15, 2, 1];

Prvky pole můžeme libovolně kombinovat.

var pole = [ 1, 9, 3, "kocka", "pes", promenna];

Jak se s polem pracuje?

Každý prvek v poli má svůj index, díky kterému můžeme k datům v poli přistupovat. Index je číslo, které je jedinečné pro každý prvek v poli. Počítá se od nuly!

var pole = [ 1, 9, 3, "kocka", "pes", promenna];
$(#"neco").text(pole[4]);
// Vypíše pátý prvek, tedy "pes"
// Místo čtyřky může být i číselná proměnná

Můžeme si také nechat vypsat obsah celého pole.

var pole = [1, -2, 3, 4, 15, 88, -10, -15, 44, 11, 55, "kočka", "pes"];
var i = 0;
while (pole.length > i)
// dokud bude délka pole větší než proměnná i
{
     $("#sem_vypisujeme").text((this).text + pole[i]);
     // do vybraného prvku vypíšeme jeho aktuální
     // hodnotu a prvek pole, který má index stejný                
     // jako aktuální velikost proměnné i
     i++;
     // zvětšení i o jedna
     // ekvivalentní s i = i + 1 nebo s i += 1
}

JQuery ale práci opět ulehčuje a poskytuje funkci each() , která umožní provést stejnou akci se všemi prvky i bez použití smyčky while. Funkce má dva parametry, první je pole, se kterým budeme pracovat a druhý je funkce, tedy  akce, kterou chceme s prvky provést.

// příklad vypsání všech prvků
var pole = [1, -2, 3, 4, 15, 88, -10, -15, 44, 11, 55, "kočka", "pes"];
$.each(pole, function(index, value) {
// index zastuje aktuálně vybraného prvku pole,
// value jeho hodnotu
  $("#sem_vypisujeme").text(
  (this).text + index + ": " + value;
  );
});

Funkce pro práci s poli

První funkcí je funkce grep(), která slouží k filtrování polí. Uvedu příklad na použití funkce grep(), konkrétně vyfiltrování všech čísel větších než nula.

var pole = [1, -2, 3, 4, 15, 88, -10, -15, 44, 11, 55, "kočka", "pes"]; 
var nove_pole = $.grep( pole, function(n){
    // parametr "n" zastupuje aktuálně vybraný prvek,
    // v podstatě this
    return n > 0;
    // když je prvek větší než 0, vrátí true,
    // jinak vrátí false
},true);
// True značí, že vracíme prvky, které vyhovují podmínce, 
// return n > 0 - vrátí prvky, které jsou větší než 0
// Místo true můžeme použít i false.
//   Pokud není uvedeno true ani false, funkce je 
// automaticky volána s false!

// Ve výsledném poli (nove pole) budou tyto prvky:
// 1, 3, 4, 15, 88, 44, 11, 55

Obě podmínky také můžeme libovolně zkombinovat, třeba vybrat prvky s indexem do 10 a velikostí nad 50. V jQuery se pak k obsahu pole přistupuje následnově.Další funkce pro práci s polem je funkce inArray(), která slouží k hledání určitého prvku. Má dva parametry, první je hledaný text a druhý je pole, ve kterém hledáme. V případě, že prvek nalezne, vrátí jeho index, a když ne, vrátí -1.

var pole = [1, -2, 3, 4, 15, 88, -10, -15, 44, 11, 55, "kočka", "pes"] ;
var nove_pole = $.grep( pole, function(n,i){
    return i < 5;
},true);
// paramter i zastupuje index aktuálního prvku pole
// v novém poli bude: 1, -2, 3, 4

Spojení dvou polí do jednoho se provádí pomocí funkce merge(). Do prvního pole se překopíruje obsah z druhého, které zůstane nezměněné.

var pole1 = [1, 2, 3, 4, 5];
var pole2 = [4, 5, 6, 7, 8];
$.merge(pole1, pole2);
// V první poli bude: 1, 2, 3, 4, 5, 6, 7, 8
// Prvky, které jsou jsou v poli dvakrát, se vykrátí
// Druhé pole se nezmění.
// Z matematického hlediska jsme v podstatě
// udělali sjednocení množin. 

Už nám zbývá pouze několik funkcí, které ale nevyužijete, pokud neumíte pracovat s klasickým javascriptovým polem. První z těchto funkcí je isArray() Když jí jako parametr předáme JS pole, vrátí true, jinak vrací false. Funkce na vytvoření pole z objektu se jmenuje makeArray() a má jeden parametr, kde předáváme objekt. Vrací pole, které vytvoří z objektu.

var objekt = {
     banany: 100,
     hrusky: 200,
     pomerance: {pocet:150,   kvalita: 1}
};
var JS_pole = $.makeArray(objekt);
// vytvoří javascriptové pole, rozdílné
// od toho našeho v jQuery

Zobrazit diskuzi