how can I check what type of element row contains select or input?

Question

I have html table I run on all table rows using map function:

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


    // check element type here

}).get();

Row contains select or input element. For example:

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

as you can see above first table row contains input second contains select element.

My question is how can I check inside map function what type of element row contains is it select or input?

if ($(this).is('input')) { // .. input } api.jquery.com/is , And you should apply that to each child element of $(this), in your case. — briosheje
– briosheje, Commented Oct 16, 2018 at 11:15
Using jQuery, you can simply use $(this).find('input').length to check if input is present in current element or not. — mohitSehgal
– mohitSehgal, Commented Oct 16, 2018 at 11:21

Mamun · Accepted Answer · 2018-10-17 05:03:46Z

You can use find() with nodeName or type.

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

Using type:

Please Note: For select elements, there are two possible values. select-one for normal select elements, and select-multiple when more than one value is accepted.

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>

Steve -Cutter- Blades · Accepted Answer · 2018-10-16 11:17:23Z

0

You can check the element's tagName for either 'INPUT' or 'SELECT' (must be uppercase). Checkout the MDN documentation.

answered Oct 16, 2018 at 11:17

Steve -Cutter- Blades

5,4623 gold badges30 silver badges46 bronze badges

Comments

yunzen · Accepted Answer · 2018-10-16 11:18:07Z

0

You want filter not map

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

console.log(fieldsValuesSelection)

answered Oct 16, 2018 at 11:18

yunzen

33.5k13 gold badges79 silver badges114 bronze badges

Collectives™ on Stack Overflow

how can I check what type of element row contains select or input?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related