How can this code be optimised, so that it has fewer lines of code and is more consise?-CodePudding

I want to make this code shorter. Like a loop or something? It would be great if anyone helps me to make the code shorter so that I can add more nth-child. like nth-child:4, 5.

$(document).ready(function(){
    var src=$(".gallery-grid-item:nth-child(1) img").data("src");
    $.ajax({
        url:src,
        xhrFields:{
            responseType:'blob'
        },
        success:function(data){
            var url=window.URL||window.webkitURL;
            $(".gallery-grid-item:nth-child(1) img").attr("src",url.createObjectURL(data));
        }
    });
});

$(document).ready(function(){
    var src=$(".gallery-grid-item:nth-child(2) img").data("src");
    $.ajax({
        url:src,
        xhrFields:{
            responseType:'blob'
        },
        success:function(data){
            var url=window.URL||window.webkitURL;
            $(".gallery-grid-item:nth-child(2) img").attr("src",url.createObjectURL(data));
        }
    });
});

$(document).ready(function(){
    var src=$(".gallery-grid-item:nth-child(3) img").data("src");
    $.ajax({
        url:src,
        xhrFields:{
            responseType:'blob'
        },
        success:function(data){
            var url=window.URL||window.webkitURL;
            $(".gallery-grid-item:nth-child(3) img").attr("src",url.createObjectURL(data));
        }
    });
});

CodePudding user response：

<script> 
$(document).ready(function(){
    numberOfNthChilds = 5
    for (let i = 1; i < numberOfNthChilds   1; i  ) {
        var src=$(".gallery-grid-item:nth-child("   i   ") img").data("src");
        $.ajax({
            url:src,
            xhrFields:{
                responseType:'blob'
            },
            success:function(data){
                var url=window.URL||window.webkitURL;
                $(".gallery-grid-item:nth-child("   i   ") img").attr("src",url.createObjectURL(data));
            }
        });
    }
});
</script>

CodePudding user response：

Try this:

<script> 
$(document).ready(function(){
  for (var i = 1; i <= 3; i  ) {
    var cls = ".gallery-grid-item:nth-child("   i  ") img";
    var src=$(cls).data("src");
    $.ajax({
        url:src,
        xhrFields:{
            responseType:'blob'
        },
        success:function(data){
            var url=window.URL||window.webkitURL;
            $(cls).attr("src",url.createObjectURL(data));
        }
    });
  }
});
</script>