Question

我有一个这样的表格

<form id="myform">
<input type="hidden" name="a" value="a1"/>
<input type="hidden" name="b" value="b2"/>
<select name="c"><option value="c3" selected="true"/></select>
<input type="text" name="d" value="d4"/>
</form>

现在，我想获取所有输入的列表并选择表单

中的元素

  var mydata = new Array();
  $('#myform').find('input, select').each(function ()
  {
    mydata.push($(this).val());
  });

我得到的结果是：a1，b2，d4，c3 但我想得到的是：a1，b2，c3，d4（与UI中显示的顺序相同）。

注意：我可以为所有输入和选择元素提供一些虚拟类（例如：mydatafields）并使用：

$('mydatafields').forEach()

等等，但我正在检查是否有更好的解决方案。

提前致谢。

Answer 1

最有效的方法是向元素添加临时属性（例如类名），然后循环遍历每个元素，最后将其删除。

var mydata = [];
$('#myform').find('input, select').addClass('temporaryClassName');
$('.temporaryClassName').each(function() {
    mydata.push($(this).val());
}).removeClass('temporaryClassName');

另一种方法包括使用:input选择任何输入元素，并过滤所需的元素。对于此示例，不严格需要过滤。为了教育目的，我已将该行包括在内。

var mydata = [];
$('#myform').find('input, select').each(function() {
    if(!/^input|select$/i.test(this.nodeName)) return; //Filter non-input/select
    mydata.push($(this).val());
});
alert(mydata)

Answer 2

尝试：输入选择器。它应该将它们全部视为输入

Answer 3

你不需要jquery ...这里是一个非jquery方法来解决这个问题。

var arr = [];
window.onload = function() {
    getChildElements(document.getElementById("myform"), arr);
    console.log(arr);
};

function getChildElements(element, arr) {
    var elements = element.childNodes;
    for (var i = 0, l = elements.length; i < l; i++) {
        if (elements[i].type == "select-one") {
            getChildElements(elements[i], arr);
        } else if (elements[i].nodeType == 1) {
            arr.push(elements[i]);
        }
    }
}

但是，如果您希望它与jquery一起使用，只需使用...更改元素定义

var elements = element.childNodes || element[0].childNodes;

Jquery - 多个选择器 - 按顺序获取元素

3 个答案: