0

我正在构建一个多步骤联系表单（每个步骤都在一个文章标签内），并且我正在使用 jQuerymap()将标签和输入值存储到一个数组中，然后在表单的最后一部分显示信息。存储数组的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's children 包含一个 textarea，运行这个代码......等等。

4

2 回答 2

1

你可以这样写：

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

JSFiddle上的实时示例

于 2012-09-11T19:56:45.920 回答
0

您可以使用: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/

于 2012-09-11T19:47:28.397 回答