Breadth-first traversal in Javascript

Question

I want give every element in a table a generated id. See this html table below:

<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>

I want to give each element an id using breadth-first traversal. So, the result becomes like this:

<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>

I have tried the each() function in jQuery to generate the id for every element in that table, but the traversal algorithm used in each() function is pre order traversal.

Can anyone suggest me the Javascript code to do this?

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/

---

If you want to avoid the redundant .children() call, you can do this:

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

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