使用jQuery map（）与多种类型的表单元素 [英] Using jQuery map() with multiple types of form elements

问题描述

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

  $（article：last）。 （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（''））
 }）; 
  

这个功能很好，但是对于文本区域返回undefined，并选择菜单。我需要调整这个代码来选择项目和文本区域。我的HTML很简单，就像这样：

 < article> 
< div class =form-item> 
< label>地址：< / label> 
< input type =text/> 
< / div> 
 
< div class =form-item> 
< label>消息：< / label> 
< textarea rows =2cols =20>< / textarea> 
< / div> 
< / article> 
  

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

解决方案

您可以使用：eq（） selector， 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>; 
} ）
  

http://jsfiddle.net/bFumx/

I am building a multi-step contact form (each step is within an article tag), and I am using jQuery map() to store the labels and input values into an array, and then on the last part of the form, the information is displayed. The jQuery that stores the array is like so:

$("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(''))
});

This works great, but returns "undefined" for textareas and select menus, rightfully so. I need to adapt this code to work for select items and textareas. My HTML is very simple, like so:

<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>

Each article represents a new section of the form. So the question is, how to I adapt my jQuery to support other form elements? Would it be a good bet to do a conditional saying, "if .form-item's children contains a textarea, run this code....etc.

解决方案

You can use :eq() selector, eq(1) selects the second child of the div tags, an input or a textarea element.

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（）与多种类型的表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！