我有使用表格功能在所有表格行上运行的html表格:
var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').map(function () {
// check element type here
}).get();
行包含选择或输入元素。例如:
<tr data-id="6">
<td style="vertical-align: inherit;text-align:center;">
<label for="">diameter</label></td><td style="text-align:center;"><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" id="propFieldName" data-id="6" value="4"></div>
</td>
</tr>
<tr data-id="7">
<td style="vertical-align: inherit;text-align:center;">
<label for="">state</label></td><td style="text-align:center;"><div class="ui-select">
<div id="select-41-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span>fixed</span>
<select data-realvalueid="20">
<option value="">fixed</option>
<option value="">not fixed</option>
</select>
</div></div>
</td>
</tr>
如您在上方看到的,第一行包含输入,第二行包含select元素。
我的问题是如何在map函数内部检查元素行包含的类型 是选择还是输入?
答案 0 :(得分:1)
您可以将find()
与nodeName
或type
一起使用。
使用nodeName
:
var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').map(function (i,el) {
var type = $(el).find('select, input')[0].nodeName;
console.log(type + ' at index ' + i);
}).get();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="6">
<td style="vertical-align: inherit;text-align:center;">
<label for="">diameter</label></td><td style="text-align:center;"><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" id="propFieldName" data-id="6" value="4"></div>
</td>
</tr>
<tr data-id="7">
<td style="vertical-align: inherit;text-align:center;">
<label for="">state</label></td><td style="text-align:center;"><div class="ui-select">
<div id="select-41-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span>fixed</span>
<select data-realvalueid="20">
<option value="">fixed</option>
<option value="">not fixed</option>
</select>
</div></div>
</td>
</tr>
</table>
使用type
:
请注意:对于选择元素,有两个可能的值。 select-one
用于普通选择元素,select-multiple
用于接受多个值。
var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').map(function (i,el) {
var type = $(el).find('select, input')[0].type;
console.log(type + ' at index ' + i);
}).get();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="6">
<td style="vertical-align: inherit;text-align:center;">
<label for="">diameter</label></td><td style="text-align:center;"><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" id="propFieldName" data-id="6" value="4"></div>
</td>
</tr>
<tr data-id="7">
<td style="vertical-align: inherit;text-align:center;">
<label for="">state</label></td><td style="text-align:center;"><div class="ui-select">
<div id="select-41-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span>fixed</span>
<select data-realvalueid="20">
<option value="">fixed</option>
<option value="">not fixed</option>
</select>
</div></div>
</td>
</tr>
</table>
答案 1 :(得分:0)
您可以检查元素的tagName
中的“ INPUT”还是“ SELECT”(必须为大写)。检出MDN documentation。
答案 2 :(得分:0)
您想要filter
而不是map
var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').filter(function () {
return $('select', this).length > 0
}).get();
console.log(fieldsValuesSelection)