Обтекание изображений с проблемой <a>jQuery

Question

Привет всем,

У меня есть куча изображений, которые мне нужно обернуть в тег и добавить к тегу ссылку из изображения '+ big' плюс использовать изображение lint в качестве заголовка для ссылки.

Проблемы, с которыми я здесь сталкиваюсь, следующие: 1) Изображения обертываются тем же самым href из первого изображения, и атрибут title не отображается.

Это мой JQuery

$(document).ready(function(){
        var ImgLink = $('.gallery img');

        var ImgTitle = ImgLink.attr('src');

        var ImgDes = ImgLink.attr('alt')

        ImgLink.each(function(){
                              $(this).wrap($('<a></a>')
                                            .attr('href', ImgTitle.replace(/\./, 'big.'), 'title'.ImgDes)
                                            )})

})

Это мой HTML

<img  alt="some alt" src="1.jpg"/></a>
<img  alt="some other alt" src="2.jpg"/></a>
<img  alt="and another alt" src="3jpg"/></a>

И это результат

<a href="1big.jpg"><img  alt="some alt" src="1.jpg"/></a>
<a href="1big.jpg"><img  alt="some other alt" src="2.jpg"/></a>
<a href="1big.jpg"><img  alt="and another alt" src="3.jpg"/></a>

Заранее благодарю за помощь

Answer 1

Вам нужно перебрать изображения и выполнить действие по созданию <a> с каждым, так как вам нужно src, характерное для изображения в каждом конкретном случае. Предполагая, что ваши файлы изображений имеют формат, указанный в вопросе

$('img').each(function() {
    var $this = $(this);
    var href = this.src.replace(/\./, "big.");
    var title = $this.attr('alt');
    $this.wrap('<a href="' + href + '" title="' + title + '"></a>');
});

Или используя свой оригинальный код,

$(document).ready(function(){
        var ImgLink = $('.gallery img');

        ImgLink.each(function(){
            var $this = $(this);
            var ImgTitle = $this.attr('src');
            var ImgDes = $this.attr('alt');
            var anchor = $('<a href="' + ImgTitle.replace(/\./, "big.") + '" title="' + ImgDes + '"></a>');
            $this.wrap(anchor);
        });
})