如何为来自数据库请求的每个图像添加灯箱句柄

Question

If I have:

<div class="feed-container">
    <div id="instafeed"></div>
</div>

and I am calling images from a database into that div id "instafeed", how can I add a rel or class to each image coming out of the database.

I used to do things like, "for each..." in PHP but I am not sure how to do it with html or js. I could use PHP if that makes it easier but my knowledge of PHP and JavaScript is limited.

My main goal above is that when images are retrieved from a database, I want each image that is retrieved to have a class or del added to it so that I can use a lightbox JS to lightbox each image.

UPDATE:

What would you write if you didn't have access to the database but you new that the database would display all the images in tags. For example, you didn't have access to the database and you are not sure if it is mysql or whatever, but you know that the database will end up displaying the images like this:

<a href="whatever path">image1</a>
<a href="whatever path">image2</a>
<a href="whatever path">image3</a>
<a href="whatever path">image4</a>

Thank you

Answer 1

If you wanted to do it with jQuery alone, once you have retrieved the images from the database you would do this -

$('#instafeed img').addClass('db-img');

With pure JavaScript -

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " db-img"; // note the space before the class name
}