Selector-> eq, gt, lt to compare and select element based on index number.

By Published jQuery 


Now i will show you some of the interesting jQuery selectors. Suppose you want to select 5th tr element(or the elements which are comes after 5th element, or before that) in a table and apply some css or any js event on that, so jQuery provides you with some new selectors. let us look at these three selectors:



1.equal to index      :eq(index)

2.greater than index  :gt(index)

3.less than index     :lt(index)



Let us look at the usage of these selectors:



a. $("li:eq(2)")   -->selects the list item which is at 2nd index position or the third element from the list.



b. $("li:gt(2)")  -->selects all list items greater than(gt) the index "2" or all list items after the 3rd item of list.



c. $("li:lt(2)")   -->selects the list items whose index is less than 2 i.e. 0th and 1st element of any list is selected. 



Now to know the clear usage of these selectors, let us look at an example:





<!--program starts-->



<html>

<head>

<script type='text/javascript'>



$("ul li:eq(4)").css("color","#f00");



$("ul li:lt(4)").css("color","#0f0");





$("ul li:gt(4)").css("color","#00f");

</script>

</head>

<body>



<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

</ul>



</body>

</html>



<!--program ends-->



Here the code will make the 5th element i.e. the item which is at 4th index will gain red color, the items less than 5th list item gains green color, the items greater than 5th list item gains blue color.



You can find a better article about this topic at :



api.jquery.com/eq-selector/
0 0 votes
Article Rating

Tags:

Subscribe
Notify of
guest

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
manish
manish
7 years ago

great jquery post

0
Reply