Wrap <a> теги вокруг <img /> с href = img src?

Question

Попытка обернуть тег вокруг изображения, addClass и ввод ГНЦ IMG как HREF тега:

$(document).ready(function() { 
$(".new img").each(function() { 
    var src = $(this).attr('src').addClass('image'); 
    var a = $('<a/>').attr('href', src); 
    $(this).wrap(a); 
}); 
}); 

Мой HTML:

<img class="new" src="pic0.png" title="Image_Title"/> 

Не могу получить эту работу. Любые предложения будут полезны!

Answer 1

Две вещи. Во-первых, у вас есть ваш селектор назад - он должен быть img.new. Во-вторых, attr возвращает строку, а не jQuery, поэтому вы не можете ее цепью. Сделайте следующее, и он должен работать:

$(document).ready(function() { 
    $("img.new").each(function() { 
     var $this = $(this); 
     var src = $this.attr('src'); 
     $this.addClass('image'); 
     var a = $('<a/>').attr('href', src); 
     $this.wrap(a); 
    }); 
}); 

Answer 2

Ваш селектор только нуждается в корректировке, это:

$(".new img") 

Должно быть:

$("img.new") 

new класс на сам <img>, то <img> не является потомком class="new" элемент, который ищет ваш текущий селектор. Также .attr('src') получает строку, так что вам нужно добавить класс перед вызовом, в целом, как это:

$(function() { 
    $("img.new").each(function() { 
    var src = $(this).addClass('image').attr('src'); 
    var a = $('<a/>').attr('href', src); 
    $(this).wrap(a); 
    }); 
}); 

You can test it here или немного проще/быстрее версия here:

$(function() { 
    $("img.new").each(function() { 
    var a = $('<a/>').attr('href', this.src); 
    $(this).addClass('image').wrap(a); 
    }); 
});