JS的:lt()选择器选取小于指定索引号的元素

作者：andy0012019.12.03来源：Web前端之家浏览：9219评论:0

关键词：js :lt()

JS的:lt()选择器选取小于指定索引号的元素，该选择器经常与其他元素/选择器一起使用，来选择指定的组中特定序号之前的元素。注：索引编号从0开始。

语法：

$(":lt(index)")

参数：

index：选中的索引号。选择小于指定索引号的元素。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("tr:lt(4)").css("background-color", "yellow");
	$("th:lt(2)").css("color", "cornflowerblue");
});
</script>
</head>
<body>

<h1>商品介绍</h1>

<table border="1">
  <tr>
    <th>序号</th>
    <th>商品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>1</td>
    <td>T恤</td>
    <td>￥40.00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>红T恤</td>
    <td>￥45.00</td>
  </tr>
  <tr>
    <td>3</td>
    <td>夹克衫</td>
    <td>￥100.00</td>
  </tr>
  <tr>
    <td>4</td>
    <td>牛仔褂</td>
    <td>￥90.00</td>
  </tr>
  <tr>
    <td>5</td>
    <td>裙子</td>
    <td>￥120.00</td>
  </tr>
  <tr>
    <td>6</td>
    <td>帽子</td>
    <td>￥30.00</td>
  </tr>
  <tr>
    <td>7</td>
    <td>休闲裤</td>
    <td>￥50.00</td>
  </tr>
  <tr>
    <td>8</td>
    <td>短裤</td>
    <td>￥30.00</td>
  </tr>
  
</table>

</body>
</html>

预览看下效果。

赏您的支持是我们创作的动力！