jQuery获取子类第n个元素

最新推荐文章于 2023-01-13 17:01:00 发布

Alex_cun

最新推荐文章于 2023-01-13 17:01:00 发布

阅读量5.5k

点赞数 2

分类专栏：个人笔记

个人笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

有两种方法可以获取tr下的第二个td元素：

1、使用css选择器，$("tr td:nth-child(2)")。

2、使用遍历函数eq()

下面就以上两个方法进行实例演示：单击按钮改变所有行的第二个单元格的样式，单击任意行改变该行第二个单元格的样式。

1、HTML结构
<table id = "test">
    <tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>
    <tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>
</table>
<input type="button" id="btn" value="设置">

2、jquery代码
$(function(){
    $("#btn").click(function() {
        $("#test tr td:nth-child(2)").addClass('red');
    });
    $("#test tr").click(function() {
        $(this).children('td').eq(1).addClass('red');
    });
});