jQuery filtri sadržaja : Content Filters

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

Filtar $(':contains()')

Primjer filtra 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 filtra 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 filtra 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 filtra 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 definirana u </style> sekciji.

jQueryvodič

jQuery filtri sadržaja : Content Filters

Filtar $(':contains()')

Web dizajn i jQuery

Filtar $(':empty()')

Filtar $(':has()')

Filtar $(':parent')

jQuery
vodič