Q:

change image src in div using .attr() in jQuery

I want to change all image sources in HTML using jQuery
I have the below div :
<div id="image_list">

    <a href="images/Image1.jpg" title="Image 1">
        <img class="img" src="images/Image1.jpg" alt="Image 1">
    </a>

    <a href="images/Image2.gif" title="Image 2">
        <img class="img" src="images/Image2.gif" alt="Image 2">
    </a>
    <a href="images/Image3.gif" title="Image 3">
        <img class="img" src="images/Image3.gif" alt="Image 3">
    </a>

    <a href="images/Image4.gif" title="Image 4">
        <img class="img" src="images/Image4.gif" alt="Image 4">
    </a>

    <a href="images/Image5.gif" title="Image 5">
        <img class="img" src="images/Image5.gif" alt="Image 5">
    </a>

</div>

and I have this jQuery function to change all the images in the div after 2 seconds when the document loads:
setTimeout(function () {
    for (var i = 0; i < links.length; i++) {
        alert("DFDF");
        $(this).find("img").attr('src', 'images/back.jpg');

    }

}, 2000);

links is an array of the a tag links = $listNode.find('a'),
and $listNode is $listNode = $('#image_list') 
the function is alerting DFDF not not changing the image source.
what is the problem in my code.
Thank you.

A:

for doesn't set this, so $(this) refers to the global window object, not the current element of the iteration. Use .each:
links.each(function() {
    alert("DFDF");
    $(this).find("img").attr('src', 'images/back.jpg');
});

But you don't need to iterate at all, because jQuery modifier functions will operate on a collection:
links.find("img").attr('src', 'images/back.jpg');

