使用jQuery ATTR（）方法

如果我有一个页面上的5张图像中选择特定的元素，它们都是完全一样的形象，看到下面使用jQuery ATTR（）方法

<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修改每个人的高度。假设第一个图像需要为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：我知道我可以使用一个循环来一次改变它们吗？

来源

2014-07-25 Eric Bishard

[EQ]（http://api.jquery.com/eq/），[：EQ]（http://api.jquery.com/eq-selector/），[gt]（http://api.jquery.com/gt-selector/），[lt]（http://api.jquery.com/lt-selector/），[n-child]（http：/ /api.jquery.com/nth-child-selector/），[第n类型]（http://api.jquery.com/nth-of-type-selector/），[第n个最后一个孩子] （http://api.jquery.com/nth-last-child-selector/）。 - > [** https：//learn.jquery.com/**]（https://learn.jquery.com/） – adeneo

我从学习中心来到这里，因为我在使用第n个孩子时遇到问题。我仍然无法获得第n个孩子的例子。但eq（）例子工作正常。有什么不同？ –

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

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

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

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

来源

2014-07-25 09:44:55

是否有一个原因，为什么我尝试使用第n个孩子不工作，但EQ（）工作正常？这个比那个好吗？我知道eq（）每次使用它来选择时会创建一个新对象，这是否意味着如果我通过它们进行循环操作，可能会导致比使用第n个孩子更多的幕后花费？ –

不，循环选择器始终是相同的开销，无论选择器是什么。没有看到你的'孩子'代码很难说出什么问题，但是API有你需要的所有信息：http://api.jquery.com/nth-child-selector/ –

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

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

Working Demo

enter image description here

来源

2014-07-25 09:44:45

这给了我循环所需的东西，现在我可以针对单个项目，我可以编写一个循环。但我很感激你花时间回答，这就是为什么我会提出你的答案。但罗里首先回答了主要问题，所以我检查了他的正确性。我正在写一篇教程，并正在写关于attr（）方法的文章。当我尝试使用第n个孩子失败时，我在这里提出了这个问题。再次，我真的很感谢工作演示。举手击掌！ –

@EricB：很高兴它可以帮助埃里克... :) –

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

这里有更多的细节http://api.jquery.com/eq/

来源

2014-07-25 09:48:27

仅链接答案还不够。请提供链接摘要。你可能也想展示一个例子。 – fxm

其实，这个链接确实有帮助，已经提供了工作演示，所以这个答案确实帮助我解答其他答案，我认为这很好。 –

使用jQuery ATTR（）方法

回答

相关问题