Question

我正在构建一个多步骤的联系表单（每个步骤都在一个文章标签中），我使用jQuery map()将标签和输入值存储到一个数组中，然后在最后一部分表格，信息显示。存储数组的jQuery就像这样：

$("article:last").prev().find("a.next").on("click", function(){
    var arr = $('.form-item').map(function() {
        var lab = $('label', this).text();
        var val = $('input', this).val();
        return "<li>" + lab + " " + val + "</li>";
    }).get()

    $("article:last ul#results").append(arr.join(''))
});

这很好用，但对textareas和select菜单返回“undefined”，这是正确的。我需要调整此代码以适用于选择项和textareas。我的HTML很简单，就像这样：

<article>
<div class="form-item">
    <label>Address:</label>
    <input type="text" />
</div>

<div class="form-item">
    <label>Message:</label>
    <textarea rows="2" cols="20"></textarea>
</div>
</article>

每篇文章都代表了表单的新部分。所以问题是，如何调整我的jQuery以支持其他表单元素？做一个有条件的说法，如果.form-item的孩子包含textarea，运行此代码等等，这是一个不错的选择。

Answer 1

你可以这样写：

var arr = $('.form-item').map(function() {
    var val = $(this).find('input, textarea').val();
    return val;
}).get();

JSFiddle

上的实例

Answer 2

您可以使用:eq()选择器，eq(1)选择div标签的第二个子项，输入或textarea元素。

var arr = $('.form-item').map(function() {
    var lab = $('label', this).text();
    var val = $(':eq(1)', this).val();
    return "<li>" + lab + " " + val + "</li>";
}).get()

http://jsfiddle.net/bFumx/

使用jQuery map（）与多种类型的表单元素

2 个答案: