Question

使用jQuery，我试图遍历页面上的表单元素，并将它们分解为每个输入类型的数组。

到目前为止，我的代码并不是要涵盖所有可能的类型，但现在每个元素都会被推送到buttons列表。

这是我的jQuery代码：

function buildForm(elem) {
    var formElements = [],
        buttons = [],
        radios = [],
        checkboxes = [],
        selects = [],
        textareas = [],
        texts = [];

    formElements.push($(elem).find('input, textarea, select'));

    $.each(formElements, function(index, el) {
        if ($(el).is('input[type="submit"],input[type="clear"]')) {
            buttons.push($(el));
        } else if ($(el).is('input[type="radio"]')) {
            radios.push($(el));
        } else if ($(el).is('input[type="checkbox"]')) {
            checkboxes.push($(el));
        } else if ($(el).is('select')) {
            selects.push($(el));
        } else if ($(el).is('textarea')) {
            textareas.push($(el));
        } else if ($(el).is('input[type="text"]')) {
            texts.push($(el));
        }
    });
}

编辑：以及带有HTML的JSFiddle：https://jsfiddle.net/jakehamiltonaimia/mLd69mhc/

欢迎任何其他提示来清理它，但不是必需的。：）

Answer 1

function buildForm(elem) {
    var mycontrols={};

    formElements.push($(elem).find('input, textarea, select'));

    $.each(formElements, function(index, el) {
        var mytype=$(el).attr('type');
        if (!mycontrols.hasOwnProperty(mytype){
            mycontrols[mytype]=[];
        }
        mycontrols[mytype].push($(el));
    });

    //do something with mycontrols, which will have 
    //properties corresponding to all the control types 
    //in the formElements collection
}

或仅获取按钮列表中所需的元素

function buildForm(elem) {
    var mybuttons=[];

    formElements.push($(elem).find('input, textarea, select'));

    $.each(formElements, function(index, el) {
        var mytype=$(el).attr('type');
        if (mytype==='button' || mytype==='submit' || mytype==='clear'){
           mybuttons.push($(el));
    });

    //do something with mybuttons   
}

Answer 2

我没有注意到选择所有元素只是为了循环它们并将它们分开

＆＃13;

function buildForm(elem) {
    var element = $(elem),
        buttons = element.find('button[type="submit"],button[type="clear"]'),
        radios = element.find('input[type="radio"]'),
        checkboxes = element.find('input[type="checkbox"]'),
        selects = element.find('select'),
        textareas = element.find('textarea'),
        texts = element.find('input[type="text"]'),
        allItems = [];
  
  // if you need all items in one array then you can merge them
  $.merge(allItems, buttons);  
  $.merge(allItems, radios);
  $.merge(allItems, checkboxes);
  $.merge(allItems, selects);
  $.merge(allItems, textareas);
  $.merge(allItems, texts);
}

buildForm('.bootstrap-iso');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label requiredField" for="email">
       Email
       <span class="asteriskField">
        *
       </span>
      </label>
      <input class="form-control" id="email" name="email" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="subject">
       Subject
      </label>
      <input class="form-control" id="subject" name="subject" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control" cols="40" id="message" name="message" rows="10"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label ">
       Check all that apply
      </label>
      <div class=" ">
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="First Choice"/>
         First Choice
        </label>
       </div>
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="Second Choice"/>
         Second Choice
        </label>
       </div>
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="Third Choice"/>
         Third Choice
        </label>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label ">
       Select a Choice
      </label>
      <div class="">
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="First Choice"/>
         First Choice
        </label>
       </div>
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="Second Choice"/>
         Second Choice
        </label>
       </div>
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="Third Choice"/>
         Third Choice
        </label>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

＆＃13;

使用“if $（element）.is（...）”检查数组元素

2 个答案: