jQuery Hierarchy Selectors List Example
Today, We want to share with you jQuery Hierarchy Selectors List Example.
In this post we will show you jQuery Basic Selectors with Adding a class to even an odd List-Elements, hear for Basic and Hierarchy Selectors we will give you demo and example for implement.
In this post, we will learn about Complete List of jQuery Selectors with an example.
Jquery : Info : odd selector
The : odd selector can selects each the table row all td with an odd index like (odds)1, 3, 5, 7 … etc
0-based indexing in odd selector
:odd selector is a jquery extension data and not any part of the data element of CSS specification value.
$(“tr:odd”).css(“background-color”,”colorname/colorcode”); // like #ff0254
Jquery :Info : even selector
The :used even selector selects each table row with an even index like 0, 2, 4, 6, 8 etc
0-based indexing
:even is a jquery extension and not part of the CSS specification.
$(“tr:evan”).css(“background-color”,”colorname/colorcode”); // like #ff0254
Example of add or evan class add using jquery
<html>
<head>
<title>Adding a class to evan and odd class of list-Elements</title>
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<h1>Add odd and evan class using jquery</h1>
<ul class="sales-line">
<li>jQuery :odd Selector - example - step by step </li>
<li>Jquery dynemically add , update and delete data</li>
<li>jquery Animation example with Source code</li>
<li>jquery validation with Example - step by step</li>
<li>jquery to ajax call - to get and post method call</li>
<li>jquery add class and jQuery remove class example</li>
<li>jquery to get id ,class and html tag</li>
<li>jquery tutorials point</li>
<li>jquery Basic top 10 demo with example</li>
<li>My first Application using core jquery and javascript</li>
<li>get all id and name using jquery</li>
</ul>
<hr/>
<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
<h3>
<a href="https://www.pakainfo.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of Pakainfo.com </a>
</h3>
</body>
</html>
Script : Add class : we can use : odd selector and :even selector
$('.carousel item:odd').addClass('odd');
$('.carousel item:even').addClass('even');
Example 2 :jQuery selectors for even and odd all rows in a table
html
<table id="sales-data">
<tbody>
<tr>
<td>ItemCode</td>
<td>DebtorName</td>
</tr>
<tr>
<td>PONumber</td>
<td>UOM</td>
</tr>
<tr>
<td>Rate</td>
<td>Qty</td>
</tr>
<tr>
<td>Total</td>
<td>subTotal</td>
</tr>
<tr>
<td>
<table id="tabledata2">
<tbody>
<tr>
<td>Discount</td>
</tr>
<tr>
<td>Discount Amount</td>
</tr>
</tbody>
<table>
</td>
</tr>
</tbody>
</table>
javascript
$(document).ready(function(){
$("#sales-data > tbody > tr:odd").addClass("odd");
$("#sales-data > tbody > tr:not(.odd)").addClass("even");
});
CSS
.odd{
color: green;
background-color: yellow;
}
.even{
color: pink;
background-color: blue;
}
View Demo1
View Demo2
View Demo3
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.