无法将嵌套表输入元素放入 jQuery 数组答案

【问题标题】：Not able to get nested table input elements into jQuery array无法将嵌套表输入元素放入 jQuery 数组
【发布时间】：2013-02-04 07:29:54
【问题描述】：

我知道这不应该这么难，但我需要另一双眼睛，因为我正在用头撞墙。

我有一个 NESTED 表，其 ID 如下：

<table id="dwMeasurements_0">
<tbody>
    <tr id="tDim_0">
        <td colspan="2">
        <strong>Total Wall Length: </strong>
        </td>
        <td>
        <input type="text" id="Msr_0_T1" class="dwInput" value="0"> Inches and </td>
        <td>
        <input type="text" id="Msr_0_T2" class="dwInput" style="margin-left:2px;" value="0"> 16ths</td>
    </tr>
    <tr>
        <td colspan="4">
        <hr>
        </td>
    </tr>
    <tr id="lDim_0_0">
        <td>
            <select id="ItemType_0_0">
                <option>Item Type</option>
                <option>Door</option>
                <option>Window</option>
                <option>Other</option>
            </select>
        </td>
        <td>
        <label>L-Dim: </label>
        </td>
        <td>
        <input type="text" id="Msr_0_0_A1" class="dwInput" value="0"> Inches and </td>
        <td>
        <input type="text" id="Msr_0_0_A2" class="dwInput" style="margin-left:2px;" value="0"> 16ths</td>
    </tr>
//MORE ROWS HERE//
</table>

我的jQuery序列化文本输入和选择元素如下：

var MeasureRowCount = $("[id^='MeasureRow_']").length; //Populated by counting parent rows 
var htmlOutput = '';
var rowInputs,rowSelects;
for(var r=0;r < MeasureRowCount;r++){
    rowInputs = $('#dwMeasurements_'+r+' :input').serializeArray();
    rowSelects = $('#dwMeasurements_'+r).find('select').serializeArray();

            $.each(rowSelects, function(i, eSelectItem){
        esName = eSelectItem.name;
        esVal = eSelectItem.value;                

                     htmlOutput += //name and value from above with markup
            }
}

// htmlOutput to DOM here with markup

我尝试了多种方法来收集输入元素，但都没有奏效。数组出现空。即使表是嵌套的，我直接调用嵌套表ID，它不应该工作吗？

【问题讨论】：

jsfiddle 和控制台消息请
使用像 [id^='MeasureRow_'] 这样的选择器是一个很好的指标，表明您应该改用公共类。
补充@Blazemonger 所说的，我看不出你在哪里使用MeasureRow_something 的任何ID，MeasureRowCount 的计数将为0
“MeasureRow_”是父，用于简单地计算嵌套表所在循环的行数。除非需要调用子元素否则不重要？
MeasureRow_ 是动态创建的，末尾有一个数字，所以创建时 id 都是唯一的。我没有在这里包含它，因为MeasureRow_ 的计数可以填充循环变量。

【解决方案1】：

这段代码：

for(var r=0;r < MeasureRowCount;r++){
    rowInputs = $('#dwMeasurements_'+r+' :input').serializeArray();

每次循环时都会覆盖rowInputs 的值。

尝试使用jQuery.merge 来组合它们：

var rowInputs=[],rowSelects=[];
for(var r=0;r < MeasureRowCount;r++){
    $.merge(rowInputs, $('#dwMeasurements_'+r+' :input').serializeArray());

【讨论】：

我尝试了合并，但仍然没有骰子。它确实创建了一个数组，但它仍然是空的。我很好奇动态创建的 input 元素似乎在已发布的 DOM 中丢失了它们的结束斜线 /> 是否会导致问题？
动态创建的 input 元素在创建它们的 jQuery 中确实有结束斜线，但它们似乎在 DOM 中被剥离了。
结束斜线并不重要，除非在 XHTML 中。不要将 HTML 标记（您在代码中编写的内容）与 DOM 元素（浏览器从 HTML 创建的对象）混淆。
您确定$('#dwMeasurements_'+r+' :input').serializeArray() 确实包含任何内容吗？
我得到一个数组，它只是空的。我在上面发布的 HTML 是脚本运行时页面上的实际内容，因此即使值为零，我仍然应该获得具有零（或空）值的元素名称 - 对吗？ ....我还更新了上面的 jQuery 以显示更多它在循环中所做的事情，但问题是我的两个数组在循环开始之前是空的。