prihlasenyprihlasit | registrovat

.filter()

kategorie: Manipulacia

.filter(selektor) vráti: jQuery

Redukuje výber elementov na tie, ktoré zodpovedajú selektoru alebo prejdu testovacou funkciou.

Podaný jQuery objekt, ktorý reprezentuje výber DOM elementov, .filter metóda vytvorí nový jQuery objekt z podmnožiny vybraných prvkov. Pridaný selektor je opäť testovaný pre každý element; elementy, ktoré nezodpovedajú selektoru budú zahrnuté do výsledku.

Vezmime si stránku s jednoduchým zoznamom:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li>list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

Pre nastavenie položiek zoznamu, môžeme aplikovať túto metódu:

$('li').filter(':even').css('background-color', 'red'); 

Výsledkom tohto volania je červená farba pozadia pre položky 1, 3 a 5, pretože zodpovedajú selektoru (pripomínam, že even a odd indexujú od 0).

Používanie Filter funkcie

Druhá verzia tejto metódy umožňuje filtrovat elementy skôr než selektor. Pre každý element, v prípade, že funkcia vráti true, bude element priradený do filtrovaného výberu inak bude vylúčený. Predpokladajme, že máme následovný úryvok HTML:

<ul>
   <li><strong>list</strong> item 1 -
      one strong tag</li>
   <li><strong>list</strong> item <strong>2</strong> -
      two <span>strong tags</span></li>
   <li>list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
   <li>list item 6</li>
</ul>

Môžeme vybrať prvky zoznamu, a potom ich filtrovať na základe ich obsahu:

$('li').filter(function(index) {
   return $('strong', this).length == 1;
}).css('background-color', 'red'); 

This code will alter the first list item only, as it contains exactly one <strong> tag. Within the filter function, this refers to each DOM element in turn. The parameter passed to the function tells us the index of that DOM element within the set matched by the jQuery object.

We can also take advantage of the index passed through the function, which indicates the 0-based position of the element within the unfiltered set of matched elements:

$('li').filter(function(index) {
   return index % 3 == 2;
}).css('background-color', 'red'); 

This alteration to the code will cause the third and sixth list items to be highlighted, as it uses the modulus operator (%) to select every item with an index value that, when divided by 3, has a remainder of 2.

API

© 2009 Shaddow admin hosting od VIPHosting