Display randomly from array based on URL

Question

I have an array of images that I want to display randomly on my page, however if the image extension matches the url extension, it should skip that certain entry in the array and move onto the next. Here is my code so far.

$(document).ready( function() {
    //$('.test a').append('<img class="img-responsive portfolio-item thumbnail" src="http://placehold.it/500x300" alt="">');

    var imgs = ["img1.png","img2.png","img3.png","img4.png",]

    for ( var n=0; n < 4; n ++){
        var goImg = 'img/' +  imgs[n];
        n = parseInt(n);
        var pItem = 'pItem' +  (n + 1);
        $('#otherProjects').append('<div class="col-sm-3 col-xs-6">
            <a href="'+pItem+'.html">
                <img class="img-responsive portfolio-item thumbnail"
                src="'+goImg+'" alt=""> 
            </a>
         </div>');              
    }

});

Answer 1

$(document).ready( function() {    
    function appendImages(pItem){
        var imgs = ["img1.png","img2.png","img3.png","img4.png",];

        for ( var n=0; n < 4; n ++){
            var goImg = 'img/' +  imgs[n];
            var matchImg = imgs[n].substr(0, imgs[n].lastIndexOf('.'));

            if(pItem != matchImg){
                $('#otherProjects').append('<div class="col-sm-3 col-xs-6">'+
                '<a href="'+pItem+'.html">'+
                    '<img class="img-responsive portfolio-item thumbnail"'+
                    'src="'+goImg+'" alt="">'+ 
                '</a>'+
                '</div>');              
            }
        }
    }   


    var page = window.location.pathname.split("/").pop();    //this will return "abc.html"
    appendImages(page.substr(0, page.lastIndexOf('.'))); //this will return "abc"
});

If you call the method "appendImages", it will send the current page name (without extension). Inside the method, the url name will be matched against the array values and skip if any matches.

Answer 2

Thank you Raja, you code helped me get closer to what I was trying to accomplish. Here is what I have so far, and it is working how I need it to, My last step is to have it pick 4 random items from the array rather then the first 4.

$(document).ready( function() {



            //array of all portfolio items
            var imgs = ["pItem1","pItem2","pItem3","pItem4","pItem5"]

            //gets the current portfolio page you are on
            var pathname = window.location.pathname.split('/').pop('');
            pathname = pathname.substr(0, pathname.lastIndexOf('.'));


            //checks the imgs array and deletes the current portfolio entry
            var imgs = $.grep(imgs, function(i){
                return(i !== pathname );

            });

            //goes through the array and appends it to the page
            for ( var n=0; n < 4; n ++){

            var imgUrl = 'img/' +  imgs[n] +'.png';

            n = parseInt(n);
            var pItem = imgs[n]

            $('#otherProjects').append('<div class="col-sm-3 col-xs-6"><a href="'+pItem+'.html"><img class="img-responsive portfolio-item thumbnail" src="'+imgUrl+'" alt=""></a></div>');

        }

});