Question

I am using JavaScript to build a dynamic HTML page, here is my code:

    for (var i = 0; i < getImage.length; i++) {
   $("#a1").append("<img src=\"" + getImage(images[i])+" \"width=\"90\""); 
      }

The getImage function returns an image…My question, how can I with JavaScript or Jquery in each iteration change the attribute of that current line, for example changing width or any image attribute of that current line in my getImage function . If I use $('this') it returns the object, but not in reference to that current line. Can I change those things in every iteration inside that function? so as a result I would get:

<img src="1.jpg" width="20">
<img src="2.jpg" width="90" >

---

function getImage(i) {
// some code

// WANT TO CHANGE HERE THE IMG ATTRIBUTE OF <img src "" width="">
return image ;
}

The idea of course is to change many more attributes…

Answer 1

If you want to be able to change the image attributes from within getImage then you should not use string-concatenation to build the image-tag.

Try something like:

for (var i = 0; i < images.length; i++) {
  $("#a1").append(getImage(images[i])); 
}

with:

function getImage(input) {
   var $img = $('<img>').attr({
     src: '%your-source%', // maybe from input?!
     width: 100
   });

   // do other stuff with $img as needed

   return $img;
}