jQuery :lt() Selector Examples

Using jQuery, it is very easy to select all elements at an index lesser than index within the matched set. It can be done by using the jQuery lt selector. In this article, I am going to share different examples on how to use the :lt selector in jQuery.

How to use the jQuery lt Selector

:lt() selector represents the Less Than selector.

Let’s see how to use the :lt() selector by means of examples. Let us assume that we have few divs, list items & a table in our web page. Now from the different elements that are on the page, we would like to select all elements from each of the different kinds of listed elements and highlight them.  We will be using the index number to target those elements. Here’s how it can be done:

Common HTML Source code for all the following examples:

<style type="text/css"<
.existing_yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.existing_purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style<

<div class="divs_container"<

	<div id="my_div1"<This is MY DIV 1

   	  <div id="my_div2" class="existing_yellow red_text"<This is MY DIV 2</div<

    </div<

  <div id="my_div3" class="existing_purple"<This is MY DIV 3</div<    

    <div id="my_div4" class="existing_yellow"<This is MY DIV 4</div<    

	<p<&nbsp;</p<    

  <ul<
    <li<List item 1</li<
    <li<List item 2</li<
    <li<List item 3</li<
    <li<List item 4</li<
    <li<List item 5</li<
  	</ul<

  <table width="100%" border="1" cellspacing="1" cellpadding="1"<
      <tr<
        <td<R1C1</td<
        <td<R1C2</td<
        <td<R1C3</td<
        <td<R1C4</td<
      </tr<
      <tr<
        <td<R2C1</td<
        <td<R2C2</td<
        <td<R2C3</td<
        <td<R2C4</td<
      </tr<
      <tr<
        <td<R3C1</td<
        <td<R3C2</td<
        <td<R3C3</td<
        <td<R3C4</td<
      </tr<
      <tr<
        <td<R4C1</td<
        <td<R4C2</td<
        <td<R4C3</td<
        <td<R4C4</td<
      </tr<
  </table<
</div<

<p<	
<input type="submit" name="sbt_div_index" id="sbt_div_index" value="Add Green class to DIV with index LT 1 "<

<input type="submit" name="sbt_list_index" id="sbt_list_index" value="Add Green class to List Item with index LT 2"<

<input type="submit" name="sbt_table_cells" id="sbt_table_cells" value="Add Green Class to Table Cell with index LT 3"<

</p<

<script type="text/javascript" language="javascript" <

$(document).ready(function(){

//Add all jQuery code here

});	

</script<

Example 1: Add class to all the divs that have an index above index 1 when a button is clicked by using the Less Than Selector

	$('#sbt_div_index').on("click", function(e){		

		$('.divs_container div:lt(1)').addClass('green');

		e.preventDefault();

	});

Example 2: Add class to all the last list items that have an index of more than 2 when a button is clicked by using the Less Than Selector

	$('#sbt_list_index').on("click", function(e){		

		$('.divs_container ul li:lt(2)').addClass('green');

		e.preventDefault();

	});

Example 3: Add class to all the table cells that have an index of more than 3 when a button is clicked by using the Less Than Selector

	$('#sbt_table_cells').on("click", function(e){				

		$('.divs_container table td:lt(3)').addClass('green');

		e.preventDefault();

	});

Simple, isn’t it?

Do you know of any other ways of using the :lt() selector? Feel free to suggest by commenting below.