Question

我有使用表格功能在所有表格行上运行的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函数内部检查元素行包含的类型是选择还是输入？

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中的“ INPUT”还是“ SELECT”（必须为大写）。检出MDN documentation。

Answer 3

您想要filter而不是map

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

console.log(fieldsValuesSelection)

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

3 个答案: