jquery 怎么获取第二个元素的值

html-css031

jquery 怎么获取第二个元素的值,第1张

有两种方法可以获取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')

})

})

.content[data-role=page]:nth-child(2){}

使用:first-child伪类时一定要保证前面没有兄弟节点,你前面有个content所以会失效

<style>

p:first-child{color:#f00}

</style>

<div>

<span></span>

<p>1</p>

<p>2</p>

<p>3</p>

</div>

你把这里的span去掉和加上再看效果 就明白了

css选择一个元素下的2中同级元素,我们首先还是需要获取到这个元素,可以通过给这个元素一个id或者是class来做,选择同级子元素,一般设置的都是相同的css样式,所以,在同级子元素的选取中css是通过一个','来隔开元素名,然后其他的还是一样的书写css样式,请看代码:

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 p,span{ //通过一个‘,’实现对2个同级子元素的选取

display:block

width:300px

height:30px

text-align:center

margin:0 auto

}

</head>

<body>

<div id='div1'>

<p>我是测试文字</p>

<span>我是测试文字1</span>

</div>

</body>

</html>