Question

有这个块：

jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
        var src = $(this).attr('src');
        var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();    
        $(this).wrap(a);
        });
})(jQuery);

之后有<a href=""></a><img src>...之类的链接，但在<img src>之前我需要<a href="">

Answer 1

您可以使用after()代替wrap

jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
        var src = $(this).attr('src');
        var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();    
        $(this).after(a);
        });
})(jQuery);

根据OP的评论进行编辑，用于更改图像src

jQuery(document).ready(function($) {
$("img[src$='.jpeg'], img[src$='.jpg'], img[src$='.png'], img[src$='.gif']").wrap('<div class="b-img"/>').each(function() {
        var src = $(this).attr('src');
        var a = $('<a/>').attr('href', src).addClass('img-link').colorbox();    
        $(this).after(a);
        $(this).attr('src', 'http://www.yoursite.com/images/img1.jpg');
        });
})(jQuery);

Answer 2

insertBefore()在this之前插入元素，如下所示：

$(function() {
   $("img").wrap('<div class="b-img"/>').each(function() {
     $('<a />', {href: this.src, 'class': 'img-link'}).colorbox().insertBefore(this);    
   });
});

此外，不需要检查所有可用的图像文件扩展名，如果您有svg等图像，请改用类。

如何在jQuery中的href之前显示图像src

2 个答案: