Make random dice array return unique attributres / prevent duplicates

Question

i have this dice array that changes attribues(srcset) in grid gallery and i need it to show unique attribues until it runs out and than start again so i wont see 2,3,4 of the same image in grid. Thanks for help

Heres the jQuery:

$(function() {
    //array
    var dice = $('.attachment-lenslight_squares').map(function() {
        return $(this).attr('srcset')
    }).get();

    $('.attachment-lenslight_squares')
        .click(function() {
            var num = Math.floor(Math.random() * dice.length);
            $(this).fadeOut(200, function() {
                $(this).attr('srcset', dice[num]);
            }).fadeIn(200);
        });

    setInterval(function() {
        var rand = Math.floor(Math.random() * 15);
        $('.attachment-lenslight_squares').eq(rand).click();
    }, 3000);

});

Thanks for ideas

Answer 1

You can swap elements using .not(), destructuring assignment, .html()

var items = $(".items").on("click", "div", function() {
  $(this).fadeOut(200, function() {
    var not = $.map($(".items div").not(this), function(el) {
      return $(el).index(".items div")
    });
    var next = not[Math.floor(Math.random() * not.length)];
    var index = $(this).index(".items div");
    var elems = $(">div", items).toArray();
    [elems[next], elems[index]] = [elems[index], elems[next]];
    items.html(elems).find(this).fadeIn(200)
  });
});

var interval = setInterval(function() {
  items.find("div")
    .eq(Math.floor(Math.random() * items.find("div").length))
    .click()
}, 3000)

.items div {
  width: 25px;
  height: 25px;
  padding: 4px;
  margin: 1px;
  border: 2px solid #000;
  border-radius: 20%;
  text-align: center;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
<div class="items">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>