Question

如果我在一个页面上有5张图像，则它们都是完全相同的图像，如下所示

<body>
<img src="http://httpJunkie.com/1st/jQ02/orangeCat.jpg" >
<img src="http://httpJunkie.com/1st/jQ02/orangeCat.jpg" >
<img src="http://httpJunkie.com/1st/jQ02/orangeCat.jpg" >
<img src="http://httpJunkie.com/1st/jQ02/orangeCat.jpg" >
<img src="http://httpJunkie.com/1st/jQ02/orangeCat.jpg" >
</body>

我只能使用JavaScript访问它们，我需要使用jQuery来修改每个的 height 。我们假设第一个需要10px x 10px并且每个连续图像需要按10px放大。我知道我可以选择第一个使用：

$("body img:first").attr({
    width: 10,
   height: 10,
});

和最后一个使用

$("body img:last").attr({
    width: 60,
    height: 60,
});

我的主要问题是如何使用.attr（）方法选择图像编号3，类似于上面的代码

我尝试使用nth-child但它没有工作。

P.S：我知道我可以使用循环来一次更改所有内容吗？

Answer 1

您可以简单地使用索引来设置不同的高度宽度，而不是单独设置它们。使用方法：

$("body img").each(function(i){
 $(this).attr({
  width: 10*(i+1),
  height:10*(i+1)
});});

<强> Working Demo

enter image description here

Answer 2

您可以使用:eq选择器或eq()方法：

$("body img:eq(3)").attr({
   width: 10,
   height: 10,
});

$("body img").eq(3).attr({
   width: 10,
   height: 10,
});

以上两者都有相同的结果。

Answer 3

您可以使用jquery中的eq（）函数。

以下是更多详情http://api.jquery.com/eq/

使用jQuery attr（）方法选择特定元素

3 个答案: