Question

I am trying to setup absolute postion for all the images that are generated by ajax.

Here are my codes,

for loop...

  var imagediv = document.getElementById('image_layout');

//generate many images
  imagediv.innerHTML=  imagediv.innerHTML + "<div class='imgDiv'>" + "<a href=\"#\""><img src=\"" + mystuff.list[n].imgPath \"" + "\" )\"" + "></a></div>";

//The image shows correctly but I want to set all of them in absolute position so I can create other effects.

I am not sure how to do it and appreciate if anyone can help me out here. Thanks a lot!!

Answer 1

I don’t see any AJAX going on, but in any case if you’re using jQuery then take full advantage of it:

var imgs = []
var $wrap = $('#image_layout')

for ( ... ) {
  imgs.push(
    "<div class='imgDiv'>"+
      "<a href='#'><img src='"+ mystuff.list[n].imgPath +"'/></a>"+
    "</div>"
  )
}

// Append everything at last for best performance
$wrap.append(
  $(imgs.join(''))
    .css('position', 'absolute')
)