获取所有子元素的 ID 及其 input/select 数据

Question

如何获取每个子元素的id及其标签名称，以便将每一列的数据保存到一个字符串中？

<div class="row">
    <div class="col-md-4">
        <input id="poz-3" placeholder="numv" type="text">
    </div>
    <div class="col-md-4">
        <input id="poz-3" placeholder="numv" type="text">
    </div>
    <div class="col-md-4">
        <select id="poz-3-s">
            <option value="1">-Pick-</option>
            <option value="2">test2</option>
            <option value="3">test3</option>
        </select>
    </div>
</div>

到目前为止我已经有了循环，但我不知道如何根据 input/select:

获取数据

for (var j = 0; j < (nCols / nRows); j++) {
}

Answer 1

如果我对你的理解正确，你可以简单地通过使用 jQuery:

遍历它们来获取所有输入的值

$.each($('.col input, .col select'), function(index, item) {
    console.log('ELEMENT ID ' + $(item).attr('id') + ' VAL - ' + $(item).val());
});

of 只需使用 serializeArray 方法，如下所示：

$('input, select').serializeArray()

此处两种方式的工作示例：https://jsfiddle.net/hc882g27/

P.S.: 在纯 javascript 中可以用 querySelectorAll 函数完成:

var items = document.querySelectorAll('.col input, .col select');

for (var i = 0; i < items.length; i++) {
  console.log(items[i].value);
}

Answer 2

您可以使用 .find('*') 获取所有子项：

$('.row').find('*').each(function(){
    //Get the id and value
})

希望对您有所帮助。

$('.row').find('*').each(function(){
    if($(this).prop('tagName')!='OPTION')
      console.log("id = "+$(this).prop('id')+" / value = "+$(this).val());
  else
    console.log("id = "+$(this).prop('id')+" / value = "+$(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-4">
        <input id="poz-3" placeholder="numv" type="text" value='first input'>
    </div>
    <div class="col-md-4">
        <input id="poz-3" placeholder="numv" type="text" value='second input'>
    </div>
    <div class="col-md-4">
        <select id="poz-3-s">
            <option value="1">-Pick-</option>
            <option value="2" selected>test2</option>
            <option value="3">test3</option>
        </select>
    </div>
</div>

获取所有子元素的 ID 及其 input/select 数据

Get ID of all child elements and its input/select data

javascript

jquery

children