Filter methodes

Zie : http://api.jquery.com/category/traversing/filtering/

Enkele selectiefilters uit voorgaand hoofdstuk zijn eveneens beschikbaar als een methode. Dit is onder andere handig om verschillende lijnen code te groeperen tot één instructie.

Een ketting ziet er als volgt uit: Het eerste deel is zoals altijd de hoofdselectie. Daarna volgt de subselectie binnen de hoofdselectie. Alle volgende delen hebben betrekking op de subselectie. Een voorbeeld:

$('li').first().addClass('highLight');

• $('li')

  Selecteer alle li-tags (hoofdselectie).

• .first()

  Selecteer van deze li-tags het eerste element (subselectie).

• .addClass('highLight')

  Ken aan de eerste li-tag op de pagina de class .highLight toe.

First(), last() en eq()

Deze methodes filteren respectievelijk het eerste, het laatste of het n-de element uit de hoofdselectie.

★ Open selectors/first.html.

$('main li').first().addClass('highLight');   // knop1
$('main li').last().addClass('highLight');    // knop2
$('main li').eq(3).addClass('highLight');     // knop3

De pagina bevat één lijst. De verschillende knoppen selecteren respectievelijk het de eerste, de laatste en de vierde li-tag binnen de main-tag. (De index start vanaf 0!)

Merk op dat deze subselecties, net zoals de meeste filtermethodes in dit hoofdstuk, enkel kijken naar het aantal li-tags op de ganse pagina. Indien de pagina meerdere lijsten bevat, gebeurt de selectie niet individueel per lijst, maar over alle lijsten heen. Wilt u van elke lijst op de pagina het eerste element selecteren, dan moet u de selectie in een soort van lus onderbrengen. Hierover dadelijk meer.

Slice()

Selecteer een subset of een bepaalde range van elementen.

★ Open selectors/slice.html.

$('main li').slice(3).addClass('highLight');      // knop1
$('main li').slice(0,3).addClass('highLight');    // knop2
$('main li').slice(3,6).addClass('highLight');    // knop3

De methode slice() heeft één of twee parameters.

• slice(n)

  Selecteer alle elementen beginnend vanaf element n.

• slice(n,m)

  Selecteer alle elementen vanaf element n tot net voor element m. Dus element m niet inbegrepen.

Filter()

Beperk de hoofdselectie tot de set die overeenstemt met de filtervoorwaarde. De filtervoorwaarde kan bestaan uit een selector, een element of zelfs uit een volledige functie.

★ Open selectors/filter.html.

$('main li').filter(':first').addClass('highLight');     // knop1
$('main li').filter(':last').addClass('highLight');      // knop2
$('main li').filter(':eq(3)').addClass('highLight');     // knop3
$('main li').filter('#theItem').addClass('highLight');   // knop4
$('main li').filter(function(index){                     // knop5
    if ((index % 3) == 0) {    
        return true;
    }
}).addClass('highLight');

Bij knop1 tot en met knop4 bevat de filter telkens een selector die we kennen uit voorgaand hoofdstuk. Knop5 bevat een functie waarbij we 0 plus elk veelvoud van 3 filteren. De parameter index refereert zoals steeds naar het actieve element.

Not()

De methode not() selecteert het inverse van filter().

★ Open selectors/not.html.

$('main li').not(':first').addClass('highLight');     // knop1
$('main li').not(':last').addClass('highLight');      // knop2
$('main li').not(':eq(3)').addClass('highLight');     // knop3
$('main li').not('#theItem').addClass('highLight');   // knop4
$('main li').not(function(index){                     // knop5
    if ((index % 3) == 0) {
        return true;
    }
}).addClass('highLight');

Has()

Filtert alle elementen die een bepaald childelement bevatten.

★ Open selectors/has.html.

$('main li').has('a').addClass('highLight');                     // knop1
$('main li').has('b').addClass('highLight');                     // knop2
$('main li').has('a[target="_blank"]').addClass('highLight');    // knop3

De verschillende knoppen selecteren respectievelijk alle li-tags die een a-tag bevatten, alle li-tags die een strong-tag bevatten en alle li-tags die een link met het attribuut target="_blank" bevatten.

Is()

Controleert of de hoofdselectie aan een bepaalde voorwaarde voldoet. De methode retourneert true of false.

★ Open selectors/is.html.

alert($('h2').is(':visible'));                          // knop1
alert($('h2').is(':hidden'));                           // knop2
alert($('main ul:first').is(':contains("laboris")'));   // knop3

• $('h2').is(':visible')

  Controleer of minstens één h2-tag zichtbaar is. In dit voorbeeld is het resultaat true.

• $('h2').is(':hidden')

  Controleer of minstens één h2-tag onzichtbaar is. In dit voorbeeld is het resultaat false.

• $('ul:first').is(':contains("laboris")')

  Controleer of de eerste ul-tag de tekenreeks laboris bevat. In dit voorbeeld is het resultaat true.