Javascript 为什么警报返回未定义？

为什么即使ID存在且有值，警报仍返回未定义或空白

 $('#tblData > tbody > tr').each(function() {                                                                                                         

              $(this).children('td').each(function(){

                  ID = $(this).children().first().next().attr("id");
                  alert(ID);

                });                          
                count = count + 1;                    
           }); 

新行

   $("#tblData tbody").append(
            "<tr>"+
            "<td><label for='BookingRoom_"+id+"_Room_No'>Room No</label><select single='single' size='1' name='BookingRoom["+id+"][roomId]' id='BookingRoom_"+id+"_roomId'><option value='1'>1</option><option value='2'>2</option></select></td>"+
            "<td><label for='BookingRoom_"+id+"_startDate' class='required'>Start Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][startDate]' id='BookingRoom_"+id+"_startDate' type='text' /></td>"+
            "<td><label for='BookingRoom_"+id+"_endDate' class='required'>End Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][endDate]' id='BookingRoom_"+id+"_endDate' type='text'  /></td>"+
            "<td><label for='BookingRoom_"+id+"_adults' class='required'>Adults <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][adults]' id='BookingRoom_"+id+"_adults'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><label for='BookingRoom_"+id+"_children' class='required'>Children <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][children]' id='BookingRoom_"+id+"_children'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><button type='button'>Delete</button></td>"+
            "</tr>");

$（“#tblData tbody”）.append(
""+
“12号房间”+
“开始日期*”+
“结束日期*”+
“成人*12345”+
“儿童*12345”+
“删除”+
"");

由于变量“ID”未定义，警报返回未定义。它不存在，也没有值

这并不是自相矛盾，而是要指出你的假设显然是错误的，因为结果并不真实。ID确实是未定义的

这个JSFiddle似乎表明，您提供的（非常空闲的）代码确实为每个元素显示了一个ID，除了submit按钮（您不向其应用ID）之外

var-id=1；
$（“#tblData tbody”）。追加(
""+
“12号房间”+
“开始日期*”+
“结束日期*”+
“成人*12345”+
“儿童*12345”+
“删除”+
"");
$（'#tblData>tbody>tr'）。每个（函数（）{
log（$（this.html（））；
$（this）.children（'td'）.each（function（）{
log（$（this.html（））；
ID=$（this.children（）.first（）.next（）.attr（“ID”）；
log（$（this.children（）.first（）.next（）.html（））；
警报（ID）；
});                          
//计数=计数+1；
}); 

我假设您的实际起始HTML代码是结构化的，因为如果是这样的话，您根本不会收到警报。（不会找到任何内容，因此不会迭代任何内容）

---

编辑：正如凯文B在评论中指出的，我下面的原始分析是有缺陷的。我错过了嵌套的“每个”呼叫。

这可能有助于理解这一点 $（this.children（）.first（）.next（）） 将检索每个表行中的第二个TD标记，并且您的TD标记上都没有ID。因此，ID的未定义值。 顺便说一下，您正在使用的选择器指示JQuery： 查找#tblData， 然后它的子体标签， 然后在每个子tr标签上， 找到第一个td标签， 然后跳到下一个， 然后获取其“id”属性的值

---

从我看到的html结构来看，我认为这不是您真正想要的。

可能是因为您尝试选择的元素尚未创建。请进行一些调试。在出现

警报的位置插入
调试器
语句，或者使用一对
控制台.log
s来确保实际选择了正确的元素，并且循环实际正在执行，这些是在这里发布问题之前应该采取的第一步。页面上有一个添加新行按钮附加到DOM。在创建元素之前是否必须重新加载页面？使用Chrome或Firefox开发工具，它们具有内置调试功能，设置断点并检查变量的值。从长远来看，您最好使用适当的调试工具，而不是依赖alert（）；如果他在元素存在之前就这么做了，那么行就不存在了，因此警报永远不会到达。。。除非存在一行，当然
找到第一个td标签，然后跳到下一个，
这是不正确的$（this）.children（）.first（）.next（）选择td的子元素、标签，然后选择标签后面的元素（理论上没有id）
<table id="tblData">
    <tbody>
        <tr>
        </tr>
    </tbody>
</table>

<script>

var id = 1; 

$("#tblData tbody").append(
            "<tr>"+
            "<td><label for='BookingRoom_"+id+"_Room_No'>Room No</label><select single='single' size='1' name='BookingRoom["+id+"][roomId]' id='BookingRoom_"+id+"_roomId'><option value='1'>1</option><option value='2'>2</option></select></td>"+
            "<td><label for='BookingRoom_"+id+"_startDate' class='required'>Start Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][startDate]' id='BookingRoom_"+id+"_startDate' type='text' /></td>"+
            "<td><label for='BookingRoom_"+id+"_endDate' class='required'>End Date <span class='required'>*</span></label><input name='BookingRoom["+id+"][endDate]' id='BookingRoom_"+id+"_endDate' type='text'  /></td>"+
            "<td><label for='BookingRoom_"+id+"_adults' class='required'>Adults <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][adults]' id='BookingRoom_"+id+"_adults'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><label for='BookingRoom_"+id+"_children' class='required'>Children <span class='required'>*</span></label><select single='single' size='5' name='BookingRoom["+id+"][children]' id='BookingRoom_"+id+"_children'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select></td>"+
            "<td><button type='button'>Delete</button></td>"+
            "</tr>");

$('#tblData > tbody > tr').each(function() {                                                                                                         
                console.log($(this).html());
              $(this).children('td').each(function(){
                 console.log($(this).html());
                  ID = $(this).children().first().next().attr("id");
                  console.log($(this).children().first().next().html());
                  alert(ID);

                });                          
                //count = count + 1;                    
           }); 
</script>