# Filter methodes

Zie : [http://api.jquery.com/category/traversing/filtering/](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.

{% hint style="success" %}
★ Open **selectors/first.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKPL-HH0N_oF8e937p%2F-L9q8SKHCWX5WItWbxZJ%2Ffirst.png?generation=1523998892666150\&alt=media)

```javascript
$('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.

{% hint style="success" %}
★ Open **selectors/slice.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKPL-HH0N_oF8e937p%2F-L9q8SM-UcH3PqrA3S8L%2Fslice.png?generation=1523998893255763\&alt=media)

```javascript
$('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.

{% hint style="success" %}
★ Open **selectors/filter.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKPL-HH0N_oF8e937p%2F-L9q8SPatvZ2BL_hGa0z%2Ffilter.png?generation=1523998892807218\&alt=media)

```javascript
$('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()`.

{% hint style="success" %}
★ Open **selectors/not.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKPL-HH0N_oF8e937p%2F-L9q8STA7TAia1k7vSTw%2Fnot.png?generation=1523998893335515\&alt=media)

```javascript
$('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.

{% hint style="success" %}
★ Open **selectors/has.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKPL-HH0N_oF8e937p%2F-L9q8SV8D8KT6kfD3_8Z%2Fhas.png?generation=1523998894045640\&alt=media)

```javascript
$('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`.

{% hint style="success" %}
★ Open **selectors/is.html**.
{% endhint %}

![](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKQspNhnRXpFZrzXv5%2F-L9q8SXmMFvU2h1AZKZX%2Fis.png?generation=1523999296906761\&alt=media)

```javascript
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`.
