July 17, 2018

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

Related FAQ

Here are some more FAQ related to this Article: