jquery选择奇数或偶数行的方法
墨初 Web前端 664阅读
在jquery中可以使用:odd与:even的选择过滤器来选择元素中奇数行与偶数行,下面是:odd与:even的选择过滤器的用法。
jquery选择奇数行与偶数行
:odd:选择奇数行
:even:选择偶数行
注:在使用选择器时,需要将其嵌套在所要选择的元素之前。
例:
下面的代码改变了表格中tr行中的奇数行与偶数行的颜色。
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <table> <tr> <td>sss</td> <td>sss</td> <td>sss</td> </tr> <tr> <td>sss</td> <td>sss</td> <td>sss</td> </tr> <tr> <td>sss</td> <td>sss</td> <td>sss</td> </tr> <tr> <td>sss</td> <td>sss</td> <td>sss</td> </tr> </table> <script> $('tr:odd').css('background-color', '#f2f2f2'); //选择偶数行 $('tr:even').css('background-color', 'red'); </script>
例2:
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <ul> <li>第一行</li> <li>第二行</li> <li>第三行</li> <li>第四行</li> <li>第五行</li> <li>第六行</li> </ul> <script> $('li:odd').css('background-color', '#f2f2f2'); //选择偶数行 $('li:even').css('background-color', 'red'); </script>
上面的代码通过jq中的:odd与:even的选择过滤器来选择元素集中的奇数行与偶数行。