Оберните <a>теги вокругс href = img src?

Question

Пытаясь обернуть тег вокруг изображения, добавьте addClass и введите src 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);
  });
});

Вы можете проверить это здесь ,или немного более простая / быстрая версия здесь :

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