一个元素有子元素，但是当我尝试访问它们时 eq() 返回 undefined

Question

我的代码有一个非常非常奇怪的问题。

我正在尝试遍历一些元素（容器元素的子元素）以更改它们的 HTML，但是当我尝试访问它们时，它们中的许多返回“未定义”。

for(i=0; i<this.shape.length; i++) {
    alert($('#selected_shape_table *').eq(i).find('div').html()); 
    $('#selected_shape_table *').eq(i).find('div').html("Test"); 
}

我已经尝试了各种方法来尝试缩小问题的范围，但我仍然感到困惑。

预期的行为是它循环遍历每个形状，并将每个形状的文本更改为“测试”。实际行为是它改变了一半元素而不改变另一半——我在上面添加了警报以返回它正在访问的元素，并发现它“找到”了其中的一半。例如，元素为 Square、Circle、Triangle、Rhombus 的返回值将是... Square, undefined, Circle, undefined。

到目前为止我学到的东西是：

• 如果我使用alert("#selected_shape_table has " + $('#selected_shape_table > *').length + " children."); 检查元素的数量，它将返回预期的结果数量。
• 如果我尝试独立访问元素（即$('#selected_shape_table *').eq(i).find('div').html()，其中 i 是手动指定的数字而不是循环指定的数字），它会表现出相同的意外行为 - 每个第二个元素都是 undefined

有什么想法吗？

编辑：

很抱歉最初没有发布标记。这些形状是动态添加的，这也是我一开始没有贴出来的原因。

<table id="selected_shape_container">
</table> 

元素通过

添加到其中

$('#selected_shape_table').append('<td><div id="' + shape + '" class="selected_shape"> d' + shape + '</div></td>');

Answer 1

用children()怎么样：

for(i=0; i<this.shape.length; i++) {
    alert($('#selected_shape_table').children().eq(i).find('div').html()); 
    $('#selected_shape_table').children().eq(i).find('div').html("Test"); 
}