代码之家 › 专栏 › 技术社区 › Michael

如何检查元素行包含select或input的类型?

jquery javascript

Michael · 技术社区 · 7 年前

 var fieldsValuesSelection = $('tr[data-id]:not([data-id=""])').map(function () {


    // check element type here

}).get();

行包含select或input元素。例如:

<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函数中检查元素行包含的类型是选择还是输入?

3 回复 | 直到 7 年前

Mamun 7 年前

你可以用 find() nodeName type .

使用 :

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();

<<表>
<tr data id=“6”>
<标签=“>直径</标签></td>&书信电报;td style=“文本-align:center;"&燃气轮机&书信电报;div class=“ui input text ui body inherit ui corner all ui shadow inset”>
</td>
</tr>

<标签=“>状态</标签></td>&书信电报;td style=“文本-align:center;"&燃气轮机&书信电报;div class=“ui选择”>
<div id=“select-41-button”class=“ui btn ui-icon-carat-d ui btn icon right ui corner all ui shadow”>
<跨度>固定的</跨度>
<选项值=“>固定的</选项>
<选项值=“>不固定</选项>
</部门></部门>
</td>
</tr>
</表>

Steve -Cutter- Blades 7 年前

你可以检查元素的 tagName 对于“INPUT”或“SELECT”(必须是大写)。签出 MDN documentation .

yunzen 7 年前

filter 不 map

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

console.log(fieldsValuesSelection)