如何检查包含选择或输入的元素行类型?

Question

我有html表格，我使用map函数在所有表格行上运行：

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>

如上所示，第一个表行包含输入，第二个包含选择元素。

我的问题是如何在映射函数内部检查元素行包含什么类型 是选择还是输入？

Answer 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>

Answer 2

您可以检查元素的tagName是否有"输入"或"选择"(必须为大写(。查看 MDN 文档。

Answer 3

你想要filter不要map

var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').filter(function () {
return $('select', this).length > 0
}).get();
console.log(fieldsValuesSelection)