将 jQuery map() 与多种类型的表单元素一起使用

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 和选择菜单返回“未定义”，这是理所当然的。我需要调整此代码以适用于选定项目和文本区域。我的 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的孩子包含一个文本区域，运行这个代码......等等。

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标签的第二个子元素，一个input或者一个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/