Filtri sadržaja ograničavaju skupinu odabranih elemenata u skladu sa sadržajem.
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
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
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
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.