JQuery - основной для проблемы цикла

Я хочу обновить src изображения в зависимости от ссылки, которую я нажимаю с помощью jquery. У меня есть четыре ссылки и изображение, показанное выше.

Если я нажму на первую ссылку, я хочу, чтобы src изображения изменил первый элемент массива контейнеров. Он должен увеличиваться так, чтобы достигнуть последнего элемента массива.

Каков наилучший способ сделать этот базовый подход?

<figure>
    <img src="http://lorempixel.com/g/400/200/" />
    <figcaption>
        <nav>
            <a href="#">Image One</a>
            <a href="#">Image Two</a>
            <a href="#">Image Three</a>
            <a href="#">Image Four</a>
        </nav>
    </figcaption>
</figure>

JQuery:

$(function(){

    var container = [
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/",
       "http://lorempixel.com/g/400/200/"
    ];

    var i;
    $("nav a").on("click", function(){
            for(i = 0; i < 4; i++) {
                $("img").attr("src", container[i]);
            }
    });

});