Changing an array of tags' attributes
<p>I have an array of objects (data)</p>

<pre><code>data[0].image = image1.jpg;
data[0].name = "some name";

data[1].image = image2.jpg;
data[1].name = "some name";

data[2].image = image3.jpg;
data[2].name = "some name";

data[3].image = image4.jpg;
data[3].name = "some name";
</code></pre>

<p>I also have a group of  tags nested in a ul. </p>

<pre><code>&lt;ul class='swapme'&gt;
  &lt;li&gt;&lt;img class="swapme" src="a.jpg" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="swapme" src="b.jpg" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="swapme" src="c.jpg" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img class="swapme" src="d.jpg" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I know I can grab the img tags with </p>

<pre><code>$('ul.swapme').children('img.swapme')
</code></pre>

<p>I know I can swap out each images src attribute with</p>

<pre><code>$('img.swapme').attr('src', data[0].image)
</code></pre>

<p>My question is, what is the right way to swap out the src attribute with the corresponding data object. ie, a.jpg becomes image1.jpg. . . ect. . . </p>

<p>If I use loops it looks ugly and clumsy, can anyone provide a better way / the right way to do this ?</p>
