0

我正在尝试遍历 DIV 列表以检查它们是否有孩子，如果有，则将该 DIV 的ID与child 的类一起添加到数组中。保存建筑物用于游戏是很重要的，如果有更好的方法来实现这一点，我愿意接受建议。

HTML

<div id="grid" class="grid">
    <div id="t1" class="tile"></div>
    <div id="t2" class="tile">
        <img class="Extractor" title="Extractor" src="images/buildings/Extractor.png">
    </div>
    <div id="t3" class="tile"></div>
    <div id="t4" class="tile"></div>
    <div id="t5" class="tile active"></div>
</div>

JS

function saveGame() {
// Format like: "[['t2','Extractor']['t8','Forge']]"
  saveData.buildings = $('.tile').children().stuff(?);

  localStorage.saveData = JSON.stringify(saveData);
}

小提琴

4

3 回答 3

3

该.map()方法用于构建一个新的 Array。在这里，我们选择子图像，并针对该集合使用地图。

回调的返回值.map()成为新数组的成员。因为 jQuery.map()是……奇怪……我们需要将返回的 Array 加倍，因为任何外部 Array 都会被展平为结果 Array。

$('.tile').children("img").map(function(i, el) { 
    return [[el.parentNode.id, el.className]]; 
}).toArray();

最后的原因.toArray()是，这个版本的.map()in jQuery 实际上返回了一个 jQuery 对象，它类似于 Array，但不是真正的 Array。所以我们需要转换它。

于 2013-08-25T18:29:51.343 回答
1

用于.each循环遍历每个图块，然后.each在子节点上循环遍历这些图块，可能会有更快的算法，如果有的话，可能有人会评论。

saveData.buildings = "[['t2','Extractor']['t8','Forge']]"; 
$('.tile').each(function(){
   var parent = $(this); 
   parent.children().each(function(){
      saveData.buildings.push([parent.id,$(this).attr("class")]); 
   });
});
saveData.resources = 'resources';
于 2013-08-25T18:20:57.003 回答
0

我还没有测试过，但是具有这种逻辑的东西应该可以正常工作：

results = [];

// iterate over every element with class 'tile'
$('.tile').each(function() {

  var $$ = $(this);

  // does this instance of class tile have a child?
  if ($$.children().length > 0) {

     // store data
     var parent = $$.attr('id');
     var child  = $$.children().first().attr('class');
     results.append([parent, child]);

  }
});
于 2013-08-25T18:25:10.213 回答