は私のDOMに同じクラス名で、私はイメージのリストを持っているjqueryの

Question

内のクラスのリストにCSSを適用します。

<a href="#"><img class="vote" src="http://2.bp.blogspot.com/_XeuZ1yDnv4Q/TSUkAT6T1dI/AAAAAAAADR8/nPHP4JvVxy8/s1600/vote.jpg"></a> 

<a href="#"><img class="vote" src="http://bgathinktank.files.wordpress.com/2011/01/vote-button.jpg"></a> 

は今jsの配列

に幅のリストを与えられたと言います

width = [100, 200] 

は、私は最初の画像は、100の幅と第二1それはjqueryのを使用して行うことができますどのように200

の幅を持つようにしたいですか？

Answer 1

1. $('.vote')クラス '.vote'を持つすべての要素を検出します。

2. .each()すべての画像を繰り返します。コールバックは、現在のインデックスと現在のDOM要素の2つのパラメータを受け取ることができます。私たちは後者を必要としません。thisもコールバックの現在のDOMelementです。

3. .width()現在の画像は、ここでは、コード情報$(this)

ここで、一致したセットの各要素の幅を設定：

var width = [100, 200]; 
var $imgs = $('.vote'); 

$imgs.each(function(idx) { 
    $(this).width(width[idx]); 
}); 

DEMO

Answer 2

$('img.vote').each(function(i) { 
    $(this).attr('width', width[i]); 
}); 

Answer 3

$('.vote').each(function(index){$(this).width(width[index])});