jQuery Hierarchy Selectors List Example

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.

Read Also:  phone number validation in html form

$(“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

Read Also:  jQuery Mobile Based Slide Swipeable Side Menu


<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:

  1. Read Also:  how to remove html tags from string in php?
  2. Read Also:  How to Submit a Form Using jQuery?
  3. Read Also:  PHP multi dimensional array sorting by a column with example
  4. Read Also:  Pagination in PHP and MySQLi Source Code
  5. Read Also:  Laravel 5.7 Jquery Ajax CRUD(insert update delete)
  6. Read Also:  Difference Between Javascript and Jquery
  7. Read Also:  How to fix the "jQuery or $ not defined WordPress" Issue in WordPress?
  8. Read Also:  get selected option value jquery Example
  9. Read Also:  How to Submit a Form Using jQuery?
  10. Read Also:  PHP multi dimensional array sorting by a column with example
CLOSEX