如何使用相同的src自動在圖像上添加href？

Question

如何使用JavaScript自動將href添加到圖像，使用相同的src和自定義「標題」屬性到div上的每個圖像？

需要每個圖像轉換上的自定義格，如：

<div id="galery"> 
<img src="images/img.jpg"> 
</div> 

到

<div id="galery"> 
<a href="images/img.jpg"><img src="images/img.jpg" title="a title"></a> 
<p>title</p> 
</div> 

Answer 1

您可以使用attr("src", "YOUR IMAGE URL"); jQuery中是這樣的：

var images = $("#galery img"); 
 

 
$.each(images, function(index, element){ 
 
    element.title = "a title"; 
 
    $(element).after("<p>title</p>"); 
 
    $(element).wrap('<a href="' + element.src + '"></a>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="galery"> 
 
    <img src="http://placehold.it/30x30" /> 
 
    <img src="http://placehold.it/40x40" /> 
 
    <img src="http://placehold.it/50x50" /> 
 
</div>

Answer 2

您可以使用此：

var $img = jQuery("#galery img"); 
var $anchor = jQuery("<a title='a title'>").attr("href", $img.attr("src")); 

$img.wrap($anchor).parent().after("<p>title</p>"); 

或者處理您可以使用多張圖片：

jQuery("#galery img").each(function() { 
    var $img = $(this); 
    var $anchor = jQuery("<a title='a title'>").attr("href", $img.attr("src")); 
    $img.wrap($anchor).parent().after("<p>title</p>"); 
});