Gyakran kevert jQuery függvények – 2. rész

Szerző: Gergő | JQuery | 2010 August 7. 08:38

Tovább megyünk azoknak a jQuery függvényeknek a listáján, amelyeket könnyen összekeverhetünk egymással, ha nem vagyunk elég figyelmesek, vagy nem hívja fel valaki rá a figyelmünket.

.children() vagy .find()

Emlékszünk még a különbségre a .parents() .parent() és .closest() függvényeknél az előző cikkben? Ez is hasonló.

.children()

Egy elem közvetlen leszármazottját adja vissza, ami illeszkedik a szűrő feltételre. Ha például minden táblázat celláját amiben a nő szó szerepel olyan vörösre szeretnénk festeni mint a pokol, akkor azt a következő képpen tudjuk megtenni:

1.

$('#table tr').children('td:contains(nő)').css('bacground','#d00');

.find()

Ugyanazt csinálja mint a .children(), viszont mélyebbre megy a kereséssel, nem csak a közvetlen gyerekeket nézi. Ha nem olyan kódban turkálunk ami egységesen van kódolva, lehet, hogy belefutunk a következő problémába:

Van egy táblázatunk, amelyben el akarjuk rejteni a rejtsEl classal rendelkező tr elemeket. Azonban van aki kiteszi a tbody taget, van aki nem, így ha kitettük, a következő parancs hatására nem történik semmi.

1.

$('table').children('tr.rejtsEl').hide();

Míg ha a find() utasítást használjuk ami mélyebben keres, sikerülni fog a művelet.

1.

$('table').find('tr.rejtsEl').hide();

.not() vagy .is() vagy :not()

.not()

Azokat az elemeket adja vissza, melyek nem felelnek meg a szűrési feltételnek.

1.

$('p').not('.piros').css('background','#0f0');

Ez minden olyan p elemet zöldre színez, ami nem rendelkezik a class=”piros” tulajdonsággal.

.is()

Azt gondolhatnánk, hogy ha az előbbi kód azokat adta vissza amik nem feleltek meg a szűrésnek, akkor a következő azokat fogja amik megfelelnek:

1.

$('p').is('.green').css('background','#0f0');

Azonban ez egy hibát fog dobni, ugyanis az is() nem elemet ad vissza, hanem egy boolean értéket. Mikor lehet ez hasznos? Ha például azt vizsgáljuk, hogy egy form mezői ki vannak e töltve:

1.
2.
3.
4.
5.
6.

$('form').submit(function(){
    if($(this).find('input').is('.kotelezo[value=]')){
        alert('Tedd azt az üres mezőkkel, mint a levegő a rendelkezésre álló hellyel: töltsd ki!');
        return false;//megszakitjuk a küldést
    }
})

:not()

Ugyanazt teszi mint a .not() csak ez pseudo-selector, azaz az idézőjelek közti szűrőfeltételben kell megadnunk. A .not()-os példát a következő képpen valósíthatjuk meg vele:

1.

$('p:not(.piros)').css('background','#0f0');

.filter vagy .each()

Mindkettőt arra használjuk, hogy bejárjuk azokat az elemeket, amiket visszakaptunk, és elvégezzünk rajtuk valamilyen műveletet.

.each()

Kétféle dologra lehet használni. Az első és legtöbbet használt funkciója, hogy végigmegy a visszaadott elemeken, és lefuttatja a paraméterként adott függvényt rajtuk.

1.
2.
3.

$(p).each(function(){
    alert($(this).text());
})

Ez végigmegy az összes p elemen, és alerteli a tartalmukat.

Viszont az each() ennél többre is képes, ugyanis be tudja járni a tömböket vagy tömb típusú objektumokat. Ugyanazt teszi, mint PHP-ban a foreach().

1.
2.
3.
4.
5.
6.
7.

var tomb = ['egy','kettő','hatvanhét'];
$.each(tomb, function(kulcs, ertek){
    alert('A ' +kulcs+ ' kulcs értéke: ' +ertek);
})
$(tomb).each(function(kulcs, ertek){
    alert('A ' +kulcs+ ' kulcs értéke: ' +ertek);
})

Amint látható ezt kétféle képpen is meg tudja tenni, azonban objektumokon csak az első féle képpen tud végigmenni.

.filter()

filter() az each()-hez hasonlóan bejár minden elemet, a különbség az, hogy paraméterként szűrőfeltételt is megadhatunk neki.

1.
2.

$('p.babiNeni').css('color','#067');
$('p').filter('.babiNeni').css('color','#067');

Mindkét fenti függvény ugyanazt csinálja, akkor mi a bánatnak használnánk a másodikat, ami egy paranccsal hosszabb? A medve itt van elásva:

1.
2.
3.

var menuLinkek = $('div#menu ul li a');
//soksok kód és művelet
menuLinkek.filter('.aktiv').css('color', '#067');

Egyszer már lekérdeztük az elemeket, felesleges lenne mégegyszer, viszont ezesetben az aktív linkre való szűkítést csak így tudjuk megoldani.

Az igazi erőssége azonban abban rejlik, hogy szűrőfeltételnek egy függvényt is megadhatunk, és ezt speciell eddig én sem tudtam, úgyhogy már megérte megírni a cikket.

1.
2.
3.

$('p').filter(function(){
    return $(this).text().indexOf('67developer') != -1;
}).css('color','#067');

Ami itt történik az az, hogy minden olyan p elem szövegét kékre színezzük, amelyben megtalálható a 67developer szó.

Ahogy feljebb már mondtam, az is() nem a .not ellentetje ahogy azt várnánk, viszont a filter() már sokkal inkább az.

A filter()-t nem használhatod tömbökön és objektumokon.

Példa

Lássunk egy kicsit komolyabb példát a filter() használatára. Tegyük fel, hogy van egy táblázatunk ami CD-k adatait tartalmazza: előadó, cím, stílus, ár. Valamilyen beviteli szerkezet segítségével /checkbox/ a felhasználó megadja, hogy azokra a zenékre nem kíváncsi aminek a stílusa “Jazz” vagy az ára több mint 6700Ft.

1.
2.
3.
4.
5.

$('#cdTabla tbody tr').filter(function(){
    var stilus = $(this).children('td:nth-child(3)').text();
    var ar = $(this).children('td:last').text().replace(/[^\d\.]+/g, '');
    return stilus.toLowerCase() == 'jazz' || parseInt(ar) >= 6700;
}).hide()

Ugorjunk neki! A táblában lévő sorokon megyünk végig, és a harmadik negyedik oszlopt vizsgáljuk. Az :nth-child(3) segítségével a harmadik oszlopot kapjuk vissza, és mivel tudjuk, hogy összesen négy van, ezért a negyediket a :last segítségével kérjük le.

Az árnál kiszűrünk mindent ami nem szám, vagy tizedespont, különben nem tudnánk összehsaonlítani a 6700Ft-ot a 6700-al.

A végén azokat az elemeket kapjuk vissza, melyeknek a stílusa “jazz” vagy az ára több mint 6700, de ez helyes, hiszen ezeket most elrejtjük a .hide() segítségével. Ámen.

.merge() vagy .extend()

Néztünk eddig példákat DOM manipulációra, bejárásra, szűrésekre, most lássunk valami mást.

.merge()

A merge() egyesíti a paraméterként átadott két tömböt, és az eredményt beleteszi az első tömbbe. Fontos, hogy nem jön létre új tömb, amint a függvény lefutott, az első tömbhöz hozzácsapja a másodikat, és kész.

1.
2.
3.
4.
5.

var tomb1 = ['egy','Megérett a megy'];
var tomb2 = ['kettő', 'Csipkebokor veszső'];
$.merge(tomb1, tomb2);
//tomb1 értéke ['egy', 'Megérett a megy', 'ketto', 'Csipkebokor veszső']
//tomb2 értéke ['kettő', 'Csipkebokor veszső'];

Miután lefut, a kód, tomb2 értéke változatlan marad. Aki ismeri a PHP-t láthatja, hogy ez a függvény ugyanaz, mint az array_merge().

.extend()

Az .extend() hasonló dolgot csinál, csak nem tömbökkel hanem objektumokkal.

1.
2.
3.

var obj1 = {egy: 'ichi', ketto: 'ni'};
var obj2 = {harom: 'san', negy: 'yon'};
$.extend(obj1, obj2);

Az extend()-nek azonban ennél több van a tarsolyában. Először is, nem csak kettő, hanem akárhány objektumot egyesítheünk vele. Másodszor pedig, rekurzívan egyesít, vagyis ha egy objektumnak valamelyik eleme szintén objektum, azt is egyesíti.

A jQuery honalpján egy jól érthető példa van erre. Sima extend():

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
 
$.extend(object1, object2);
 
//eredmény
/*object1 === {
  apple: 0,
  banana: {price: 200},
  cherry: 97,
  durian: 100
};*/

A banán értékét felülírta, ne nézte meg mi van benne. Most ugyanezt úgy, hogy első paraméterbe true értéket adunk:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

var object1 = {
  apple: 0,
  banana: {weight: 52, price: 100},
  cherry: 97
};
var object2 = {
  banana: {price: 200},
  durian: 100
};
 
$.extend(true, object1, object2);
 
//eredmény
/*object1 === {
  apple: 0,
  banana: {weight: 52, price: 200},
  cherry: 97,
  durian: 100
};*/

Látható, hogy itt már a banánt kiértékelte, és azon belül is egyesítette a dolgokat.

Összegzés

Ha nem is magyaráztam el mindent a részletekig menőn, talán voltak dolgok, amiket eddig nem tudtál, és most a cikknek hála megvilágosodtál. Ha van kérdésed nyugodtan írj, vagy ha van ötleted miről írjak cikket, az is jöhet kommentbe.

Kapcsolódó cikkek

Hozzászólások