使用“if $(element).is(...)”检查数组元素

Posted 2023-05-09

【中文标题】使用“if $(element).is(...)”检查数组元素

【英文标题】：Checking array elements using "if $(element).is(...)"

【发布时间】：2017-01-10 17:28:31

【问题描述】：

使用 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/

欢迎提供任何其他清理此问题的提示，但不是必需的。 :)

【问题讨论】：

问题出在哪里？

向我们展示 html 代码

为什么只选择它们一起然后拆分它们，为什么不使用正确的选择器开始

你为什么不做buttons.push(formElements.find('button')、radios.push(formElements.find(':radio'))等等而不是循环

你也可以使用vanilla js - el.type === 'submit' || el.type === '清除'

【参考方案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>

【参考方案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