从数组内容中设置div id

Question

我正在试图弄清楚如何给16个不同的div提供存储在16个元素长数组中的id名称。

这样我就可以将divs“placement”随机化为一个记忆游戏，因为如果可能的话，会有8种不同的div样式和div id一起改变。

我的计划是为div id设置与该特定div的样式相同的名称。

有没有办法将第一个div的id和样式设置为myarray [0]中的值，将第二个div的id和样式设置为myarray [1]，依此类推？

修改

var card = ["orange","orange","pink","pink","red","red","purple","purple",
"blue","blue","green","green","brown","brown","yellow","yellow"];

for(var j, x, i = card.length; i; j = parseInt(Math.random() * i),
x = card[--i], card[i] = card[j], card[j] = x);

然后在身体中我试图实现代表这一点的东西：

<div id="card[0]"></div>
<div id="card[1]"></div>
<div id="card[2]"></div>

依旧......

Answer 1

这是一个使用纯JavaScript随机化类名的解决方案。

更新回答

我已经更新了我的解决方案，现在澄清了问题，这里它适应了你的颜色。我已将background-color的{​​{1}}设置为数组中设置的颜色。这也可以使用.card轻松完成，我建议不要在id中使用[]字符，但我认为我不确定这是否符合标准。

jsFiddle

id

原始答案

给定一组id和一组HTML元素，将为var colors = [ "orange","orange","pink","pink","red","red","purple","purple", "blue","blue","green","green","brown","brown","yellow","yellow" ]; var divs = document.getElementsByClassName("card"); while (divs.length > 0) { var i = Math.floor(Math.random() * colors.length); divs[0].style.backgroundColor = colors[i]; colors.splice(i, 1); divs = [].slice.call(divs, 1); } 中的每个元素分配一个随机id。

jsFiddle

<强>的JavaScript

ids

<强> HTML

var ids = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var divs = document.getElementsByClassName("game-element");

while (divs.length > 0) {
    var i = Math.floor(Math.random() * ids.length);
    divs[0].id = 'item-' + ids[i];
    ids.splice(i, 1);
    divs = [].slice.call(divs, 1);
}

<强> CSS

<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>
<div class="game-element"></div>

Answer 2

为每个div分配一个randomdiv类或类似的东西。这将确保您可以选择您想要的而不影响其他div。

然后你可以这样做

var idArr = [/**random ids here**/];
$( ".randomdiv" ).each(function( index ) {
  $(this).attr("id",idArr[index]);
});

那将使用类randomdiv循环遍历每个div并为其分配一个值idArr，您可以根据需要定义它，我猜你的用例有某种类型的随机函数

更新

随着您对问题的更新，我发现了一个问题。您有要设置的非唯一ID。 ID必须是唯一的。如果要将它们中的多个分配为您想要使用类的相同内容。所以代码看起来像这样

var card = ["orange","orange","pink","pink","red","red","purple","purple",

“蓝”， “蓝色”， “绿色”， “绿色”， “褐色”， “褐色”， “黄”， “黄色”];     $（“。randomdiv”）。each（function（index）{       $（本）.addClass（卡[指数]）;     }）;

然后你可以像这样用来定义你想要的样式

.randomdiv.blue{
  background-color:blue;
}

.randomdiv.green{
  background-color:green;
}
...

Answer 3

很难确切地知道你在追求什么，但如果使用jQuery你可以做这样的事情：

HTML：

<div class="random"></div>
<div class="random"></div>
<div class="random"></div>

JavaScript的：

var myarray = ["one","two","three"];    

// loop through all divs
$('div.random').each(function(index) {

    // set div id to array value
    $('div').attr('id', myarray[index]);

});

结果：

<div class="random" id="one"></div>
<div class="random" id="two"></div>
<div class="random" id="three"></div>

补充评论：

值得确保或至少检查数组长度是否等于div元素的数量，否则您可能会收到异常。

Answer 4

您的页面可以在服务器端或客户端呈现

1）在服务器端，使用服务器端语言（例如C＃）和框架（例如ASP.NET）更容易

2）在客户端，您可以基于任何JavaScript模板（例如下划线模板）生成DOM，并通过将数组作为数据模型传递来渲染它 您可以参考下划线模板方法：http://underscorejs.org/#template

修改

在服务器端的示例（我使用C＃和MVC razor视图作为示例，但如果您使用任何其他语言和Web服务器，它可能是相同的想法。）

@{ ids = ... }
@foreach (var id in ids) 
{
  <div id="@id"></div>
}

代码将帮助您使用您定义的ID生成div。

并且在客户端（我使用下划线模板，但如果您使用任何其他引擎，则再次使用相同的想法）

var list = "_.each(ids, function(id) {<div id='<%id%>'></div>});";
_.template(list, {ids: ['id1', 'id2', 'id3']});

这将生成3个div，其中列出了ID。

<强>更新

最好在生成div时生成id，而不是先生成div然后修改其id。