Understanding the :Even Selector in jQuery With Example

:Even Selector in jQuery

To choose particular HTML components based on where they are in a collection of matched elements, jQuery :even selector is a useful tool. It functions similarly to a simple filter selector, enabling you to narrow down a wider range of components to only include ones with even indices. This feature helps developers “write less, do more” by making typical web development activities easier. It is part of jQuery’s development philosophy.

What is the Selector?

The :even selector in jQuery extends CSS selections.Even-numbered zero-based index items in their parent element’s children or prior selection’s set are found. Script and jQuery consider the first element at index 0 “even,” the second “odd,” the third at index 2, etc. Remember that jQuery and JavaScript indexing beginners get confused.

Syntax:

$(selector:even) is the basic syntax for using the :even selector, which is based on the general jQuery pattern.Action().

$(selector:even).action()

The abbreviation $ (or jQuery) is used to define or access jQuery.
The selector specifies the first HTML elements jQuery will “query” or “find”. CSS selector expressions can be IDs, classes, or tag names like ‘#myid’, ‘.myclass’, or ‘p’.
Even: The collection of elements that the selector has identified is subjected to this filter. The selection is reduced to just entries having an even index.
When an element matches the combined selection and filter, the jQuery action or method to be applied is specified by the.action() function. Actions may involve altering behaviour, appearance, or content.

Beyond that, this collection is filtered. It calls indices 0, 2, and 4 “List Item 1”, “List Item 3”, and “List Item 5”.

How it Works

Sizzle, jQuery’s selector engine, processes $(selector:even) when executed. Sizzle identifies all things matching the first selector, such as elements. It then goes over this matched set of elements again. The zero-based index of each set element is calculated. If the index is even, the element is in the final jQuery object. Action() is then applied to each element in this filtered jQuery object.

jQuery’s implicit iteration eliminates the need for developers to construct manual loops to apply operations to many components, like JavaScript’s for loops. This simplifies and reduces errors in the code. Moreover, browser-dependent particularities are handled by jQuery, guaranteeing dependable performance across officially supported browsers.

Code Example

Let’s look at a basic HTML list to show how to use the :even selector. Items in the “even” (0-indexed) list will have their backgrounds highlighted.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery :even Selector</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        li {
            padding: 5px;
            margin: 3px;
            background: #eee;
        }
        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>
<h2>Even List Items Highlighted</h2>
<ul>
    <li>Item 1 (Index 0)</li>
    <li>Item 2 (Index 1)</li>
    <li>Item 3 (Index 2)</li>
    <li>Item 4 (Index 3)</li>
</ul>
<p><em>Even index items (0, 2, ...) are highlighted.</em></p>
<script>
    $(function(){
        $('li:even').addClass('highlight');
    });
</script>
</body>
</html>

Output:

Even List Items Highlighted

•Item 1 (Index 0)
•Item 2 (Index 1)
•Item 3 (Index 2)
•Item 4 (Index 3)
Even index items (0, 2, ...) are highlighted.

How the Code Works

HTML Structure: An unordered list (<ul>) in HTML has six elements. The human-readable position and zero-based index are displayed for each <li>.

jQuery Inclusion: Simply use $(‘li:even’) to pick all <li> elements with even index (0, 2, 4, etc.) in their parent, such as the first, third, fifth, etc. list items .This allows your page to utilise jQuery features.

CSS Styling: Basic CSS styles the items in the list. The purpose of the.highlight class is to provide a bright background for items to stand out.

$(document).ready(): This function only runs jQuery code when the HTML document loads and the DOM is ready. This eliminates jQuery difficulties with unloaded things.

$(‘li:even’): The example’s core is $(‘li:even’). After selecting all elements on the page, $(‘li’) filters the collection. It detects
elements at indices 0, 2, 4 (called “List Item 1”, “List Item 3”, and “List Item 5” in human terminology).

.addClass(‘highlight’): Chained to the selector is the jQuery method.addClass(‘highlight’). This shows how jQuery uses implicit iteration to efficiently modify several components with one function call. All <li> items selected by $(‘li:even’) receive the highlight CSS class. Backgrounds for “List Item 1,” “List Item 3,” and “List Item 5” will be yellow.

Conclusion

Using jQuery’s 0-based indexing, the :even selector effectively targets elements in a collection by positional parity. jQuery follows the “write less, do more” principle by simplifying complex selections and operations, making code clearer. Strong jQuery filters simplify DOM traversal and manipulation in web development.

Page Content

Tutorials