применить CSS к списку классов в JQuery

Question

У меня есть список изображений с тем же именем класса в моем домене, как показано ниже:

<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, а второе - ширину 200.

Как это можно сделать с помощью jquery?

Answer 1

1. $('.vote') находит все элементы с классом '.vote'.

2. .each () перебирает все изображения.Обратный вызов может принимать два параметра: текущий индекс и текущий элемент DOM.Последний нам не нужен, поскольку this также является текущим DOM-элементом в обратном вызове.

3. .width () устанавливает ширину каждого элемента вСовпадает набор, вот текущее изображение $(this)

Вот код:

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

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

DEMO

Answer 2

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

Answer 3

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