jQuery návod – (12) Práce s poli

V dnešním díle seriálu se ponoříme do práce s poli v kontextu jQuery. Ačkoli mnoho z toho, co budeme procházet, lze provádět čistým JavaScriptem, jQuery nám nabízí několik nástrojů, které mohou proces usnadnit a zefektivnit.

1. Vytváření pole s jQuery

Ačkoli pro vytváření základního pole používáme čistý JavaScript (var pole = [1, 2, 3]), jQuery nám nabízí metodu $.makeArray(), která převede objekt na pole:

var objekt = $('.nejakyPrvek');  // Výběr jQuery
var pole = $.makeArray(objekt);

var objekt = $('.nejakyPrvek');  // Výběr jQuery

var pole = $.makeArray(objekt);

2. Procházení pole s $.each()

Jak jsme si již ukázali v předchozích článcích, metoda $.each() je skvělý nástroj pro procházení pole nebo objektů:

var ovoce = ['jablko', 'banán', 'citron'];
$.each(ovoce, function(index, hodnota) {
    console.log("Ovoce na indexu " + index + " je " + hodnota);
});

var ovoce = ['jablko', 'banán', 'citron'];

$.each(ovoce, function(index, hodnota) {

    console.log("Ovoce na indexu " + index + " je " + hodnota);

});

3. Vyhledání prvku v poli s $.inArray()

Pokud chcete zjistit, zda je nějaká hodnota v poli, můžete použít metodu $.inArray():

var pole = [1, 2, 3, 4, 5];
if ($.inArray(3, pole) !== -1) {
    console.log("Hodnota 3 byla v poli nalezena.");
}

var pole = [1, 2, 3, 4, 5];

if ($.inArray(3, pole) !== -1) {

    console.log("Hodnota 3 byla v poli nalezena.");

}

4. Filtrace pole s $.grep()

Metoda $.grep() umožňuje filtraci pole na základě určité funkce:

var pole = [1, 2, 3, 4, 5];
var filtrovanePole = $.grep(pole, function(hodnota) {
    return hodnota > 3;
});

console.log(filtrovanePole);  // [4, 5]

var pole = [1, 2, 3, 4, 5];

var filtrovanePole = $.grep(pole, function(hodnota) {

    return hodnota > 3;

});

​

console.log(filtrovanePole);  // [4, 5]

5. Mapování pole s $.map()

Pokud chcete upravit každý prvek pole pomocí určité funkce, můžete použít $.map():

var pole = [1, 2, 3];
var upravenePole = $.map(pole, function(hodnota) {
    return hodnota * 10;
});

console.log(upravenePole);  // [10, 20, 30]

var pole = [1, 2, 3];

var upravenePole = $.map(pole, function(hodnota) {

    return hodnota * 10;

});

​

console.log(upravenePole);  // [10, 20, 30]

Závěr

Práce s poli je základní součástí každého programování, a ačkoli čistý JavaScript poskytuje mnoho nástrojů pro manipulaci s poli, jQuery přináší řadu užitečných funkcí, které vám mohou usnadnit život. Ať už potřebujete procházet, filtrovat nebo upravovat pole, jQuery má pro vás nástroje k dispozici.

V dalším díle seriálu se podíváme n