Question

I am currently dabbling in jQuery and have come across a problem which I think may be related to Javascript arrays but I have no idea if this is so.

I am trying to create img elements through the use of the Jquery append method, now this works fine, but the problem lies when I am trying to set the src of the img element.

For example the following code will set the multiple img sources to the same value:

HTML

<a class="imageLink" title="Tiger">Tiger</a>

<a class="imageLink" title="Leopard">Leopard</a>

<a class="imageLink" title="Lion">Lion</a>

Javascript

$(".imageLink").append('<img src="http://domain.org/'+$(".imageLink").attr("title")+'.jpg" />');

The above code once run will create:

HTML

<a class="imageLink" title="Tiger">Tiger<img src="http://domain.org/Tiger.jpg" /></a>

<a class="imageLink" title="Leopard">Leopard<img src="http://domain.org/Tiger.jpg" /></a>

<a class="imageLink" title="Lion">Lion<img src="http://domain.org/Tiger.jpg" /></a>

How can I ensure the different appended img elements will all have different src values?

Answer 1

Try this:

$(".imageLink").each(function(){
    $(this).append('<img src="http://domain.org/'+$(this).attr("title")+'.jpg" />');
});