1

像这样：

<div>Hello</div>
<div>World</div>

我只希望第二个 div onClick 事件变成红色，我知道方法 first-child，但我想要更具体的东西，比如 div[1] 我该怎么做？

4

4 回答 4

3

如果您只想使用 jQuery，请使用.eq()

$('div').eq(1).on('click',function(){
    $(this).css({color:'red'});
});

或者您可以通过创建一个类将其与 CSS 组合：

.RedClicked {
    color:red;
}

并使用相同的点击事件：

$('div').eq(1).on('click',function(){
    $(this).addClass('RedClicked');
});

我推荐后者，因为它使所应用的 CSS 更加可重用。

于 2013-10-08T16:05:35.187 回答
2

使用:nth-child() 索引从1

或:eq() 索引从0

或者:nth()它是一样的:eq()

或.eq()

$('div:nth-child(2)').click(function(){ // or  $('div:eq(1)').click(function(){
    $(this).css('color','red');
});
于 2013-10-08T16:05:34.013 回答
0

有不同的方式

$('div').eq(1)// will select <div>World</div>

或者你可以使用

   $( "div:nth-child(1)" ) // will select <div>Hello</div>

或者只是（虽然我不会推荐这个）

$($('div')[1]) // same as .eq
于 2013-10-08T16:07:24.363 回答
0

您可以使用 css nth-child() 此选择器匹配其父元素的第 n 个子元素，无论其类型如何。

例如：点击

<html>
<head>
<style> 
p:nth-child(1)
{
background:#ff0000;
}
</style>
</head>

<body> 
<p>The first paragraph.</p>
<p>The second paragraph.</p>    

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>
于 2013-10-08T16:07:25.487 回答