javascript - 如何检查元素行包含 select 或 input 的类型？

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>

正如您在上面看到的，第一个表格行包含输入，第二个包含选择元素。

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

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>

使用类型:

请注意:对于选择元素，有两个可能的值。 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>