1. 程式人生 > >jQuery獲取子類第n個元素

jQuery獲取子類第n個元素

有兩種方法可以獲取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');
    });
});