从每个 <img> 获取 src 并将其设置为 css 作为背景

Question

我正在尝试制作 jquery 代码，该代码将从 html 中的每个图像中获取 src 并将其设置为 css 以用于例如 number-1 类，然后为每个 img 设置 css ： visibility:hidden;我已经编码了之前添加 div 并将被包装到其中的函数。我有自动生成的 html 代码，我不想编辑每一页。

var a = $('div.gallery > a > img');

for( var i = 0; i < a.length; i+=1 ) {
  a.slice(i, i+1).wrapAll('<div class="grid-img"></div>');
}

$('.grid-img').each(function(i){
  $(this).addClass('number-' + (i+1));
});

然后将 img 中的每个 src 添加到变量 imgBgLink1,2,3,4 并将其设置为类 number1,2,3,4 的背景图像

$("div.gallery a img").each(function(i){
  var imgBgLink+'(i+1)' = $(this).attr("src");
  $(".number+(i+1)").css("background-image", "url("imgBgLink+(i+1)")";
});

jsfiddle

Answer 1

你的图片选择器错误，改正为

var a = $('div.gallery > a > img'); // 图片在锚标签内

你也可以像下面这样改进你的 jquery 脚本

$(function(){
 $('div.gallery > a > img').each(function(index){
    $(this).addClass('number-' + (index+1));
    $(this).wrapAll('<div class="grid-img"></div>');
 });
});

Demo

编辑：根据编辑后的帖子更新

$(function(){
  $('div.gallery > a > img').each(function(index){
      var num = parseInt(index)+1;
      var imageBG = $(this).attr('src')+num;
      $(this).wrapAll('<div class="grid-img number-'+num+
     '" style="background-image: url('+imageBG+')"></div>');
   });
 });

Demo

Answer 2

您的选择器错误：

var a = $('div.gallery > img > a');

应该是这样的：

var a = $('div.gallery > a > img');

并像这样使用：

for( var i = 0; i < a.length; i+=1 ) {
  a.slice(i, i+1).wrapAll('<div class="grid-img number-"'+i+'></div>');
}