4

我想给表中的每个元素一个生成的 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>

我已经尝试过each()jQuery 中的函数为该表中的每个元素生成 id，但each()函数中使用的遍历算法是前序遍历。

任何人都可以建议我使用 Javascript 代码来执行此操作吗？

4

2 回答 2

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

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

演示：http: //jsfiddle.net/J5QMK/

如果你想避免多余的.children()调用，你可以这样做：

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

演示：http: //jsfiddle.net/J5QMK/1/

于 2013-05-13T16:23:43.483 回答
5

进行广度优先搜索的常用方法是使用队列，如下所示：

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);
        });
    }
});
于 2013-05-13T16:30:26.447 回答