Question

我正在尝试阅读html表单的所有元素，以便可以即时更改布局。表单容器和内容如下所示：

<label for="text-xplant" class="fx-text-label">Text Field</label>
<input type="text" class="form-control" name="text-xplant" id="text-xplant">


<label for="textarea-xplant" class="fx-textarea-label">Text Area</label>
<textarea type="textarea" class="form-control" name="textarea-xplant" id="textarea-xplant"></textarea>


<label for="date-xplant" class="fx-date-label">Date Field</label>
<input type="date" class="form-control" name="date-xplant" id="date-xplant">


<label for="select-xplant" class="fx-select-label">Select</label>
<select class="form-control" name="select-xplant" id="select-xplant">
<option value="option-1" selected="true" id="select-xplant-0">Option 1</option>
<option value="option-2" id="select-xplant-1">Option 2</option>
<option value="option-3" id="select-xplant-2">Option 3</option>
</select>


<label for="checkbox-group-xplant" class="fx-checkbox-group-label">Checkbox Group</label>
<div class="checkbox-group">
<div class="checkbox">
<input name="checkbox-group-xplant[]" id="checkbox-group-xplant-0" value="CheckValue1" type="checkbox" checked="checked">
<label for="checkbox-group-xplant-0">CheckText1</label>
</div>
</div>


<label for="radio-group-xplant" class="fx-radio-group-label">Radio Group</label>
<div class="radio-group">
<div class="radio">
<input name="radio-group-xplant" id="radio-group-xplant-0" value="RadioValue1" type="radio">
<label for="radio-group-xplant-0">RadioText1</label>
</div>
</div>

我的jQuery如下，我可以毫无问题地获得所有标签-但我无法获得单个元素。请记住-这些是表格中仅有的6个元素，但是它们可以按任何顺序排列。另外，可能不存在某些元素，或者每个元素可能不止一个-尽管所有元素都具有与html规则保持一致的唯一名称和ID。

var cntxt, tblRowTH="", tblRowTD="", chk, rdo, txt, dte, txa, slc;

$('#fb-rendered-form .rendered-form > .form-group').each(function() 
{
// get table row headers / titles
tblRowTH += "<th>" + $(this).find('label').html() + "</th>";

// get table-row form controls - testing for each of our 6 control types -
// Note: .prop('outerHTML') as it gets tag AND content; .html() only gets content!
chk = $(this).find('.checkbox-group').prop('outerHTML')  || 'NoElem';   chk += "<td>"+chk+"</td>";
rdo = $(this).find('.radio-group').prop('outerHTML')     || 'NoElem';   rdo += "<td>"+rdo+"</td>";
txt = $(this).find('input[type=text]').prop('outerHTML') || 'NoElem';   txt += "<td>"+txt+"</td>";
dte = $(this).find('input[type=date]').prop('outerHTML') || 'NoElem';   dte += "<td>"+dte+"</td>";
txa = $(this).find('textarea').prop('outerHTML')         || 'NoElem';   txa += "<td>"+txa+"</td>";
slc = $(this).find('select').prop('outerHTML')           || 'NoElem';   slc += "<td>"+slc+"</td>";
});

除了弄清楚我需要外HTML，以确保我得到了容器以及每个容器中的标记，我的输出充满了“未定义”的输出。可以看出，我希望将标签放入表格标题中，并将每个对应的元素放入下面的行中。

实现此目标的正确/更好的方法是什么？

我如何遍历HTML表单并单独获取后代

0 个答案: