SoFunction
Updated on 2025-04-09

Example of usage of lt selector in jQuery

This article describes the usage of lt selector in jQuery. Share it for your reference. The specific analysis is as follows:

This selector matches all elements smaller than the given index value.
The minimum index value starts at 0.

Syntax structure:

Copy the codeThe code is as follows:
$(":lt(index)")

This selector is generally used in conjunction with other selectors, such as class selectors and element selectors, etc.
For example:

Copy the codeThe code is as follows:
$("li:lt(3)").css("color","blue")

The above code can set the font color in the li element with an index less than 3 to blue.
If not used with other selectors, the default state is to use with * selectors, for example $(":lt") is equivalent to $("*:lt").

Parameter list:

parameter describe
index The given index value.

Example code:

Example 1:

Copy the codeThe code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https:///" />
<title>I</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("li:lt(3)").css("color","blue");
  });
})
</script>
</head>
<body>
<ul>
<li>html zone</li>
<li>div+css zone</li>
<li>jQuery Zone</li>
<li>Javascript area</li>
</ul>
<button >Click to view the effect</button>
</body>
</html>

The above code can set the font color in the li element set with an index value less than 3 to blue.

Example 2:

Copy the codeThe code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https:///" />
<title>I</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#btn").click(function(){
    $("*").each(function(){
      alert();
    })        
  })
  $("#show").click(function(){
    $(":lt(11)").css("border","1px solid red");
  })
});
</script>
</head>
<body>
<ul>
<li>html zone</li>
<li>div+css zone</li>
<li>jQuery Zone</li>
<li>Javascript area</li>
</ul>
<button >Transfer through all elements</button>
<button>Click to view the selector effect</button>
</body>
</html>

Since the above code does not specify a selector used with the :lt selector, it is used with the * selector by default. Therefore, the above code can set the border color of elements with index values ​​less than 11 in all elements in the current document to red.

I hope this article will be helpful to everyone's jquery programming.