hi,欢迎访问本站!
当前位置: 首页Web前端正文

jquery选择奇数或偶数行的方法

墨初 Web前端 725阅读

在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的选择过滤器来选择元素集中的奇数行与偶数行。

声明:无特别说明,转载请标明本文来源!