2011-02-24 6 views
72

¿Cómo puedo determinar si el elemento devuelto por un filtro de entrada en jQuery es un cuadro de texto o una lista de selección?jQuery: determine si el elemento de entrada es un cuadro de texto o una lista de selección

Quiero tener un comportamiento diferente para cada uno (y devuelve valor de cuadro de texto de texto, seleccione los rendimientos tanto clave y texto) de configuración

Ejemplo:

<div id="InputBody"> 
<div class="box"> 
    <span id="StartDate"> 
     <input type="text" id="control1"> 
    </span> 
    <span id="Result"> 
     <input type="text" id="control2"> 
    </span> 
    <span id="SelectList"> 
     <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
     </select> 
    </span> 
</div> 
<div class="box"> 
    <span id="StartDate"> 
     <input type="text" id="control1"> 
    </span> 
    <span id="Result"> 
     <input type="text" id="control2"> 
    </span> 
    <span id="SelectList"> 
     <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option> 
      <option value="3">Option 3</option> 
     </select> 
    </span> 
</div> 

y luego el guión:

$('#InputBody') 
    // find all div containers with class = "box" 
    .find('.box') 
    .each(function() { 
     console.log("child: " + this.id); 

     // find all spans within the div who have an id attribute set (represents controls we want to capture) 
     $(this).find('span[id]') 
     .each(function() { 
      console.log("span: " + this.id); 

      var ctrl = $(this).find(':input:visible:first'); 

      console.log(this.id + " = " + ctrl.val()); 
      console.log(this.id + " SelectedText = " + ctrl.find(':selected').text()); 

     }); 

Respuesta

133

Puede hacer esto:

if(ctrl[0].nodeName.toLowerCase() === 'input') { 
    // it was an input 
} 

o el presente, que es más lento, pero más corto y más limpio:

if(ctrl.is('input')) { 
    // it was an input 
} 

Si desea ser más específico, se puede probar el tipo:

if(ctrl.is('input:text')) { 
    // it was an input 
} 
+1

he tenido que añadir la sintaxis de jQuery $ (elemento) .is ('input') para conseguir que funcione, pero en general todo bien. – avantprime

24

alternativamente puede recuperar propiedades DOM con .prop

aquí es código de ejemplo para selecto cuadro de

if(ctrl.prop('type') == 'select-one') { // for single select } 

if(ctrl.prop('type') == 'select-multiple') { // for multi select } 

de cuadro de texto

if(ctrl.prop('type') == 'text') { // for text box } 
Cuestiones relacionadas