Java Articles

Advertisement

jQuery Custom Selector Example

by Ram Satish

Share

Other than CSS selectors, jQuery adds its own custom selectors. In this article, we will see how jQuery uses its custom selector to find elements based on text and the sequence in which the element is placed in the document.
Regard the example setup read here.

Custom Selector Syntax

The custom selector syntax is the same as the CSS selector syntax, where the selector starts with a colon (:).
For example,

$('div:odd').addClass('highlight');

Selecting Odd or Even Numbered Elements

Advertisement

To demonstrate the example, we will use two table and few div elements.

customSelector.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Selecting Elements Example</title>
<script src="jquery.js"></script>
<script src="customSelector.js"></script>
<link rel="stylesheet" href="customSelector.css" type="text/css" />
</head>
<body>
<table>
<th>Table 1</th>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
</tr>
</table>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<div>Fourth div</div>
<div>Fift div</div>
<div>warning: Sixth div</div>
<div>Seventh div</div>
<table>
<th>Table 2</th>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
</tr>
</table>
</body>
</html>
Document without the script
Document without the script

To select elements based on odd/even sequence of elements, we will use jQuery custom selectors :odd and :even.
In the following example, we will apply styles to even and odd-numbered table rows as well as div elements.

$(document).ready(
function() {
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
$('div:even').addClass('even');
$('div:odd').addClass('odd');
});

After including the above script, the odd and even rows/div get selected.

Odd/Even Custom Selector
Odd/Even Custom Selector

Since the index is 0 based, the first row which is zero is considered as even and the second row as odd, and so on.

If you want the odd and even relative to the parent element rather than to all the elements selected in the doc, use the :nth-child() selector instead. Note that :nth-child() is one based index sothe first row is considered odd. We will modify the document to provide a button which will apply the nthChild functionality when clicked.

customSelector.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Selecting Elements Example</title>
<script src="jquery.js"></script>
<script src="customSelector.js"></script>
<link rel="stylesheet" href="customSelector.css" type="text/css" />
</head>
<body>
<table>
<th>Table 1</th>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
</tr>
</table>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<div>Fourth div</div>
<div>Fift div</div>
<div>warning: Sixth div</div>
<div>Seventh div</div>
<table>
<th>Table 2</th>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
</tr>
</table>
<button type="button" id="apply_nth_child">Apply nth-Child</button>
</body>
</html>

jQuery is modified to add the button click functionality.

$(document).ready(
function() {
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
$('div:even').addClass('even');
$('div:odd').addClass('odd');
$("#apply_nth_child").click(function(){
$('tr:even').removeClass('even');
$('tr:odd').removeClass('odd');
$('tr:nth-child(even)').addClass('even');
$('tr:nth-child(odd)').addClass('odd');
});
});
Custom Select using Nth-Child
Custom Select using Nth-Child

Select Element Based On Text

Here’s how to select all the div elements that contain the text warn.

$(document).ready(
function() {
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
$('div:even').addClass('even');
$('div:odd').addClass('odd');
$("#apply_nth_child").click(function(){
$('tr:even').removeClass('even');
$('tr:odd').removeClass('odd');
$('tr:nth-child(even)').addClass('even');
$('tr:nth-child(odd)').addClass('odd');
});
$('div:contains(warn)').addClass('warning');
});
Custom selector based on text
Custom selector based on text

Select Element Based On a Sequence

If you want to select elements based on a sequence, use select :eq(seq). For example,

$('tr > td:eq(1)').addClass('special');

This selects the second row of the table and applies CSS class ‘special’.
Let’s change the jQuery to add selection based on sequence. In order to add a lick event listener, we need to find the button with ID =apply_nth_child and then call click() on the returned jQuery button object. Since we need to find a specific button and not all buttons, instead of using $('button'), we will find it by ID using $("#apply_nth_child").

$(document).ready(
function() {
$('tr:even').addClass('even');
$('tr:odd').addClass('odd');
$('div:even').addClass('even');
$('div:odd').addClass('odd');
$("#apply_nth_child").click(function(){
$('tr:even').removeClass('even');
$('tr:odd').removeClass('odd');
$('tr:nth-child(even)').addClass('even');
$('tr:nth-child(odd)').addClass('odd');
});
$('div:contains(warn)').addClass('warning');
$('tr > td:eq(1)').addClass('special');
$('div:eq(6)').addClass('special');
});

Here is the style sheet.

customSelector.css:

.even {
background: #222;
color: white;
text-shadow: none;
}

.odd {
background: #FFE7E7;
color: #666;
border: 1px solid #FFDBDB;
}

.warning {
background: #FEF4C8;
color: #666;
border: 1px solid #FDEBA5;
}

.special {
background: #CCD9E7;
color: #666;
border: 1px solid #FFDBDB;
font-weight: bold;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
color: #888
}

Here is what we get when we open the doc in a browser.

Custom Selector
Custom Selector

and When you click ‘Apply nth-child’.

CSS Selector - Using nth-child
CSS Selector – Using nth-child

Download the source code

This was an example about jQuery custom selector.

You can download the source code here: customSelector.zip

Share

Advertisement

Related

Advertisement

Latest

Advertisement