In addition to selectors, filters are applied. Filters allow you to filter the found elements according to a certain principle.
Applying filters is as easy as using selectors. For example, we can only get elements with even indexes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery World</title>
</head>
<body>
<table>
<tr><td>Word</td><td>Translation</td></tr>
<tr><td>Cabbage</td><td>Cabbage</td></tr>
<tr><td>Carrot</td><td>Carrot</td></tr>
<tr><td>Potato</td><td>Potato</td></tr>
<tr><td>Tomato</td><td>Tomato</td></tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("tr:even").css('background-color', 'silver');
});
</script>
</body>
</html>
We have a table and we want to color all even rows. In this case, we apply a filter :even. The filter is placed after the selector: $(“tr:even”). As a result, all even lines will be grayed out:
Since the numbering of objects starts from zero, therefore the first line will be zero and, thus, falls into the number of even ones.
We can distinguish the following set of basic filters:
|
Filter |
Description |
|
:eq(n) |
Selects the nth element of the sample (numbering starts from zero) |
|
:even |
Selects elements with even numbers |
|
:odd |
Selects elements with odd numbers |
|
:first |
Selects the first element of the selection |
|
:last |
Selects the last element of the selection |
|
:gt(n) |
Selects all elements with a number greater than n |
|
:lt(n) |
Selects all elements with a number less than n |
|
:header |
Selects all headings (h1, h2, h3) |
|
:not(selector) |
Selects all elements that do not match the selector given in parentheses. For example, the expression |
A special kind of filter – content filters provide access to elements that have specific content:
|
Filter |
Description |
|
:contains(‘text’) |
Gets all elements that contain text |
|
:has(‘selector’) |
Gets all elements that contain at least one child element that matches the selector |
|
:empty |
Gets all elements that have no children |
|
:first child |
Gets all elements that are the first child of their parent |
|
:last child |
Gets all elements that are the last children of their parent |
|
:nth-child(n) |
Gets all elements that are the nth element in their parent (numbered from one) |
|
:nth-child(even) |
Gets all elements that are even elements in their parents (numbered starting from one). So, in the previous table example, the expression |
|
:nth-child(odd) |
Gets all elements that are odd elements in their parents (numbered from one) |
|
:only child |
Gets all elements that are the only children of their parent |
|
:parent |
Gets all elements that have at least one child element |
For example, if we want to get all elements that contain the text Cabbage, we can use the following expression: $(“:contains(‘Cabbage’)”). Or we can use selectors to specify the search, for example, to select only in strings:$(“tr:contains(‘Cabbage’)”)
And the third group of filters allows you to get certain elements of html forms or use their attributes:
|
Filter |
Description |
|
:button |
Gets all elements |
|
:checkbox |
Gets all elements |
|
:checked |
Gets all checked items |
|
:disabled |
Gets all elements that are inactive |
|
:enabled |
Gets all elements that are in active state |
|
:file |
Gets all elements of file ( |
|
:input |
Gets all elements |
|
:hidden |
Gets all hidden elements |
|
:password |
Gets all elements |
|
:radio |
Gets all elements |
|
:reset |
Gets all elements |
|
:selected |
Gets all checked items |
|
:submit |
Gets all elements |
|
:text |
Gets all elements |
|
:visible |
Gets only visible elements |
We can combine several selectors and filters in one expression: $(‘#results:odd:has(‘img’)’). In this case, we select all odd elements with id=”results”that contain elements img, that is, images.