使用JQuery遍歷DOM

Question

我正在嘗試遍歷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);
}

小提琴

Answer 1

.map()方法用於構建新的數組。 在這里，我們選擇子圖像，並針對該集合使用map。

.map()回調的返回值成為新Array的成員。 因為jQuery的.map()很奇怪，所以我們需要將返回的Array加倍，因為任何外部Array都會被展平為結果Array。

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

---

最后使用.toArray()的原因是，此版本的jQuery中的.map()實際上返回一個jQuery對象，該對象類似於Array，但不是實際的Array。 因此，我們需要對其進行轉換。

Answer 2

用.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';

Answer 3

我還沒有測試過，但是這種邏輯的東西應該可以正常工作：

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]);

  }
});