Entrada del selector de Jquery [tipo = texto] ')

98

Escribí un código que básicamente selecciona todos los input type=textelementos como este:

$('.sys input[type=text]').each(function () {}

¿Cómo lo cambio para seleccionar input[type=text]o select?

javascript jquery Jack
fuente

Respuestas:

177

Usando un selector de CSS normal:

$('.sys input[type=text], .sys select').each(function() {...})

Si no te gusta la repetición:

$('.sys').find('input[type=text],select').each(function() {...})

O más concisamente, pase el contextargumento:

$('input[type=text],select', '.sys').each(function() {...})

Nota: Internamente jQueryconvertirá lo anterior en find()equivalente

http://api.jquery.com/jQuery/

Internamente, el contexto del selector se implementa con el método .find (), por lo que $ ('span', this) es equivalente a $ (this) .find ('span').

Personalmente, considero que la primera alternativa es la más legible :), aunque tu opinión

Andreas Wong
fuente
1
Dado que context formestá utilizando find form, find formes más eficiente que context form(se evita una función de llamada). Esto es válido para casi todos los selectores utilizados. Entonces, IMO, find formes más eficiente que normal CSS selector, porque ambas partes del selector son relativas al nodo raíz, mientras que en find form, solo la .sysparte es relativa a él, luego input[type=text],selectse ejecuta en un conjunto de elementos mucho más pequeño, por lo que puede ser más rápido (pero es necesario que esto se verifique mediante pruebas)
pomeh
1
@pomeh Puedo ver de dónde vienes, pero si el desempeño de una $llamada es tan importante para tu aplicación, evita usar jQuery por completo :). Esta respuesta intentó responder a la pregunta de OP, si hubiera sido una cuestión de rendimiento, esta respuesta no estará aquí en primer lugar. Gracias de todos modos por el comentario :), lo agradezco
Andreas Wong
1
mi comentario no fue sobre la $llamada perf a one , sino sobre todas las $llamadas presentes en una aplicación. En mi opinión, cuando tienes diferentes formas de hacer lo mismo, trato de elegir siempre la que funciona mejor bc. slow performance=== unhappy users. Además, ambos podemos responder la pregunta de un OP con múltiples respuestas (como lo hizo usted) y proporcionar ventajas / inconvenientes de cada una de ellas (como hice en el comentario). En mi opinión, es importante darse cuenta de por qué todas las respuestas son diferentes y, al mismo tiempo, proporcionan el mismo resultado. Además, podemos escribir código JavaScript vanilla que JavaScriptperformance
funcione
1
@pomeh Mi punto sobre el rendimiento fue, si realmente te importa el rendimiento, no uses jQuery's $, clasifica tus divs específicamente y usa document.getElemenById/ElementsByClassName, en lugar de pasar por lo $que hace muchas comprobaciones / análisis de cadenas de tu selector, jQuery no es famoso por su biblioteca de alto rendimiento. Y, honestamente, no he visto que una aplicación se ralentice debido a que llamo a $muchos, si tiene un sitio web que tiene ese problema, por favor muéstremelo, estoy muy interesado :)
Andreas Wong
2
@pomeh Sí, estoy totalmente de acuerdo con tu punto de JS! = Rendimiento :), al final del día, todavía depende de nosotros, los programadores, escribir código sensato. Gracias por la breve discusión, que tengas un buen día :)
Andreas Wong
7 
$('.sys').children('input[type=text], select').each(function () { ... });

EDITAR: En realidad, este código anterior es equivalente al selector de niños .sys > input[type=text]si desea que el descendiente seleccione (.sys input[type=text] ) necesite usar las opciones dadas por @NiftyDude.

Más información:

Wouter J
fuente
que ha escrito chilrenen lugar dechildren
pomeh
5

Si tiene varias entradas como texto en un formulario o una tabla que necesita recorrer, hice esto:

var $list = $("#tableOrForm :input[type='text']");

$list.each(function(){
    // Go on with your code.
});

Lo que hice fue verificar cada entrada para ver si el tipo está configurado en "texto", luego tomará ese elemento y lo almacenará en la lista de jQuery. Luego, iteraría a través de esa lista. Puede establecer una variable temporal para la iteración actual como esta:

var $currentItem = $(this);

Esto establecerá el elemento actual en la iteración actual de su para cada ciclo. Entonces puedes hacer lo que quieras con la variable temp.

¡Espero que esto ayude a alguien!

Jason Cidras
fuente
3 
$('input[type=text],select', '.sys');

para bucle:

$('input[type=text],select', '.sys').each(function() {
   // code
});
thecodeparadox
fuente