使用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（）方法

回答

相關問題