Question

我试图制作jquery代码，它将从html中的每个图像获取src，并将其设置为css for class，例如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并将其设置为类号为1,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 > 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>');
}

Answer 2

您的图像选择器错误，将其更正为

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

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

2 个答案: