1. Naslovnica
  2. Uvod u jQuery
  3. jQuery filteri sadržaja

jQuery filteri sadržaja : Content Filters

Zadaća filtera sadržaja je ograničavanje skupine odabranih elemenata na one koje odgovaraju filteru sadržaja.

Uvod u jQuery
krivulja

Tečaj - Uvod u HTML

Uvod u html

Image by rawpixel.com on Freepik

4.5

Zašto ne sada?

Uvod u jQuery

Naša preporuka

Cloudinary oglas

Besplatne usluge:

CDN pohrana slika i videa.

Pretvorba formata slika: webp...

Vrhunsko AI povećanje slika!

25Gb podataka.

4.5

Zašto ne sada?

jQuery filteri sadržaja : Content Filters

Filtri sadržaja ograničavaju skupinu odabranih elemenata u skladu sa sadržajem.

Filtar $(':contains()')

Primjer filtera koji selektira element koji u sebi sadrži tekst "Drugi":

<body>
  <p>Prvi odlomak</p>
  <p>Drugi odlomak</p>
  <p>Treći odlomak</p>
		
<script type="text/javascript">
$(function()
  {
  $('p:contains("Drugi")').css('color', 'blue');
  });
</script>
</body>

Rezultat koji daje ovaj primjer u web pregledniku:

Prvi odlomak
Drugi odlomak
Treći odlomak

Web dizajn i jQuery

Filtar $(':empty()')

Primjer filtera koji selektira sve elemente koji u sebi nemaju teksta (oni koji su prazni):

<body>
  <p>Prvi odlomak</p>
  <p>Drugi odlomak</p>
  <p></p>
		
<script type="text/javascript">
$(function()
  {
  $('p:empty').text('Dodali smo ovaj tekst');
  });
</script>
</body>

Rezultat primjera u web pregledniku:

Prvi odlomak
Drugi odlomak
Dodali smo ovaj tekst

Filtar $(':has()')

Primjer filtera koji selektira element koji u sebi sadrži element dan kao parametar:

<body>
<div>  
  <p>Prvi odlomak</p>
</div>  
<p>Drugi odlomak</p>
<p>Treći odlomak</p>
		
<script type="text/javascript">
$(function()
  {
 $('div:has("p")').css('color', 'blue');
  });
</script>
</body>

Rezultat primjera u web pregledniku:

Prvi odlomak
Drugi odlomak
Treći odlomak

Filtar $(':parent')

Primjer filtera koji selektira element koji u sebi sadrži barem jedan element dijete, uključujući tekst:

<head>
<style>
    td {width:40%; background:blue;}
</style>
</head>
<body>
<table>
  <tr>
    <td>Redak 1</td>
    <td></td>
  </tr>
  <tr>
    <td>Redak 2</td>
    <td></td>
  </tr>
</table>

<script type="text/javascript">
$(function()
{
  $('td:parent').css('background', 'yellow');
});
</script>
</body>

Rezultat primjera u web pregledniku:




Redak 1





Redak 2

U praznim ćelijama ostala je plava boja pozadine određene unutar <style> elementa.