Q:

get src from every  and set it to css as background

im trying to make jquery code which will get src from every image in html and set it to css for class for example number-1 and then set css for every img : visibility:hidden; I have coded function which add div before  and  will be wrapped into it. I have auto-generated html code and i dont want to edit every page.
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));
});

and then take every src from img add it to variable imgBgLink1,2,3,4 and set it as background-image for class 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

A:

Your image selector is wrong, correct it to 
var a = $('div.gallery > a > img'); // image is inside anchor tag
Also you can improve your jquery script like below
$(function(){
 $('div.gallery > a > img').each(function(index){
    $(this).addClass('number-' + (index+1));
    $(this).wrapAll('<div class="grid-img"></div>');
 });
});

Demo
EDIT : updated as per edited post
$(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

