Question

像这样：

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

我只希望第二个div onClick事件变成红色，我知道方法是第一个孩子，但是我想要更特殊的东西，如div [1]我该怎么做？

Answer 1

如果您只想使用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应用得更加可重复使用。

Answer 2

从1

开始使用:nth-child()索引

或:eq()索引从0

开始

或:nth()与:eq()

相同

或.eq()

$('div:nth-child(2)').click(function(){ // or  $('div:eq(1)').click(function(){
    $(this).css('color','red');
});

Answer 3

有不同的方法

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

或者您可以使用

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

或只是（虽然我不建议这样做）

$($('div')[1]) // same as .eq

Answer 4

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

EG：click

<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>

如何通过数字选择某个对象？

4 个答案: