使用「if $（element）.is（...）」檢查數組元素

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 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');

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

Answer 2

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 
}