Javascript 试图防止DIV中重复的随机项

有人能帮我吗？我所需要做的就是防止重复显示。我正在填充一个数组并随机生成食谱。刷新页面时，同一项目有时会出现两次。我需要防止这种情况发生。我在底部放了一把小提琴，谢谢

下面是我的代码：

 var recipe_data = [
   {
      "id":"11",
      "recipeName":"Hummus",
      "recipeCategory":"4",
      "recipeImageCategoryURL":"http://www.slurrpy.com/wp-content/uploads/2012/08/roasted-eggplant-hummus-800x500.jpg"
   },
   {
      "id":"12",
      "recipeName":"Antipasto",
      "recipeCategory":"4",
      "recipeImageCategoryURL":"http://static.menutabapp.com/img/cache/800x500/2012/10/23/7857b394d50293d29443dc09eac76b3d.jpeg"
   },
   {
      "id":"10",
      "recipeName":"Zucchini",
      "recipeCategory":"4",
      "recipeImageCategoryURL":"https://paleofood.io/wp-content/uploads/2016/05/garlic-shrimp-zucchini-noodle-main-800x500.jpg"
   }
]

     var categoryItems = [];

         $.each(recipe_data, function(i, item){
            if (item.recipeCategory == "4") { categoryItems.push(item); }
         });

         var similarRecipe = '';
         var randomRecipe = {};


         for(var i = 0; i < categoryItems.length; i ++) {

            randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
            categoryItems.length = 2;

            similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>' 
            + '<a href="' + randomRecipe.recipePageURL +'">' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + '</a>' 
            + '<a href="' + randomRecipe.recipePageURL +'">' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '</a>' + '</div>' ]; 
            $('#recipeSimilar').append(similarRecipe);  

        }

var配方_数据=[
{
“id”：“11”，
“recipeName”：“Hummus”，
“互惠范畴”：“4”，
“recipeImageCategoryURL”：http://www.slurrpy.com/wp-content/uploads/2012/08/roasted-eggplant-hummus-800x500.jpg"
},
{
“id”：“12”，
“recipeName”：“Antipasto”，
“互惠范畴”：“4”，
“recipeImageCategoryURL”：http://static.menutabapp.com/img/cache/800x500/2012/10/23/7857b394d50293d29443dc09eac76b3d.jpeg"
},
{
“id”：“10”，
“recipeName”：“西葫芦”，
“互惠范畴”：“4”，
“recipeImageCategoryURL”：https://paleofood.io/wp-content/uploads/2016/05/garlic-shrimp-zucchini-noodle-main-800x500.jpg"
}
]
var类别项目=[]；
$。每个（配方\数据、功能（i、项目）{
如果（item.recipeCegory==“4”）{categoryItems.push（item）；}
});
var similarRecipe=''；
var randomRecipe={}；
对于（变量i=0；i

---

这是一把小提琴：

在拾取一个随机项目后，只需将其从阵列中移除，这样就不会再次拾取该项目：

var randomIndex = Math.floor(Math.random()*categoryItems.length);

randomRecipe = categoryItems[randomIndex];

categoryItems.splice(randomIndex, 1);

---

更新的fiddle:

拾取随机项目后，只需将其从阵列中移除，这样就不会再次拾取：

var randomIndex = Math.floor(Math.random()*categoryItems.length);

randomRecipe = categoryItems[randomIndex];

categoryItems.splice(randomIndex, 1);

---

更新的fiddle:

我想在这种情况下，您希望从

配方\u数据中获取
n
不同的项目？
在这种情况下，您应该编写一个指定的函数来获取所需的项

function getRandomItems(noOfItems, source){
    var samples = source.slice();
    var results = [];

    for(var i=0; i < noOfItems;i++){
        results = results.concat(samples.splice(Math.floor(Math.random() * samples.length), 1));
    }

    return results;
}

函数getRandomItems（noOfItems，源代码）{
var samples=source.slice（）；
var结果=[]；
对于（变量i=0；i

这里需要注意的是使用
.slice（）
浅层复制数组，而不是运行for循环来添加项目，并且当您要从数组中提取项目时，可以选择
。splice（）

请参阅演示：
我想在这种情况下，您希望从
配方数据中获取不同的项目？
在这种情况下，您应该编写一个指定的函数来获取所需的项

function getRandomItems(noOfItems, source){
    var samples = source.slice();
    var results = [];

    for(var i=0; i < noOfItems;i++){
        results = results.concat(samples.splice(Math.floor(Math.random() * samples.length), 1));
    }

    return results;
}

函数getRandomItems（noOfItems，源代码）{
var samples=source.slice（）；
var结果=[]；
对于（变量i=0；i

这里需要注意的是使用
.slice（）
浅层复制数组，而不是运行for循环来添加项目，并且当您要从数组中提取项目时，可以选择
。splice（）

请参阅演示：
是否可以将最后一个配方id存储在本地存储器中，以防止再次显示它（我想刷新意味着重新加载页面？）

与其他答案不同，这也适用于浏览器刷新…
可能会将最后一个配方id存储在本地存储器中，以防止再次显示它（我想刷新意味着重新加载页面？）

与其他答案不同，这也适用于浏览器刷新