javascript中的廣度優先遍歷

Question

我想給表中的每個元素生成一個id。看到這張html表格如下：

<table> 
<tbody> 
    <tr> 
     <td>A1</td> 
     <td>A2</td> 
     <td> 
      <a href="#">A3</a> 
     </td> 
    </tr> 
    <tr> 
     <td>B1</td> 
     <td>B2</td> 
     <td> 
      <a href="#">B3</a> 
     </td> 
    </tr> 
    <tr> 
     <td>C1</td> 
     <td>C2</td> 
     <td>C3</td> 
    </tr> 
</tbody> 
</table> 

我想給每個元素使用廣度優先遍歷的id。所以，結果變成這樣：

<table> 
<tbody id="0"> 
    <tr id="1"> 
     <td id="4">A1</td> 
     <td id="5">A2</td> 
     <td id="6"> 
      <a href="#" id="13">A3</a> 
     </td> 
    </tr> 
    <tr id="2"> 
     <td id="7">B1</td> 
     <td id="8">B2</td> 
     <td id="9"> 
      <a href="#" id="14">B3</a> 
     </td> 
    </tr> 
    <tr id="3"> 
     <td id="10">C1</td> 
     <td id="11">C2</td> 
     <td id="12">C3</td> 
    </tr> 
</tbody> 
</table> 

我試圖jQuery中的每一個（）函數來生成該表中的每一個元素的ID，但在每（）函數使用的遍歷算法是前序遍歷。

任何人都可以建議我的JavaScript代碼來做到這一點？

Answer 1

var n = 0 
var level = $("table"); 

while (level.children().length) { 
    level = level.children().each(function(_, el) { 
     el.id = n++; 
    }) 
} 

DEMO：http://jsfiddle.net/J5QMK/

---

如果你想避免冗餘.children()電話，你可以這樣做：

while ((level = level.children()).length) { 
    level.each(function (_, el) { 
     el.id = n++; 
    }) 
} 

DEMO：http://jsfiddle.net/J5QMK/1/

Answer 2

一種常見的方式做一個breadth-first search如下：使用隊列：

jQuery(document).ready(function() { 
    var ctr = 0; 
    var queue = []; 

    queue.push(jQuery("table").children()); // enqueue 
    while (queue.length > 0) { 
     var children = queue.shift(); // dequeue 
     children.each(function (ix, elem) { 
      queue.push( // enqueue 
       jQuery(elem).attr("id", ctr++).children(); 
      ); 
      console.log(elem.tagName + ": " + elem.id); 
     }); 
    } 
});