Jquery selector input [type = text] ')

98

J'ai écrit un code qui sélectionne essentiellement tous les input type=textéléments comme celui-ci:

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

Comment puis-je le modifier pour sélectionner input[type=text]ou select?

javascript jquery Jack
la source

Réponses:

177

Utilisation d'un sélecteur CSS normal:

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

Si vous n'aimez pas la répétition:

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

Ou plus brièvement, passez l' contextargument:

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

Remarque: en interne jQueryconvertira ce qui précède en find()équivalent

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

En interne, le contexte du sélecteur est implémenté avec la méthode .find (), donc $ ('span', this) est équivalent à $ (this) .find ('span').

Personnellement, je trouve que la première alternative est la plus lisible :), mais votre avis

Andreas Wong
la source
1
Puisque le context formutilise le find form, le find formest plus efficace que le context form(une fonction d'appel évitée). Ceci est valable pour presque tous les sélecteurs utilisés. Ensuite, IMO find formest plus efficace que le normal CSS selector, car les deux parties du sélecteur sont relatives au nœud racine, où dans le find form, seule la .syspartie est relative à lui, puis input[type=text],selectest exécutée sur un ensemble d'éléments beaucoup plus petit, ce qui peut être plus rapide (mais cela doit être vérifié par des tests)
pomeh
1
@pomeh Je peux voir d'où vous venez, mais si les performances d'un $appel sont si importantes pour votre application, veuillez éviter d'utiliser jQuery :). Cette réponse a tenté de répondre à la question d'OP, si c'était une question de performance, cette réponse ne sera pas ici en premier lieu. Merci quand même pour le commentaire :), appréciez-le
Andreas Wong
1
mon commentaire ne portait pas sur le perf a one $call, mais sur tous les $appels présents dans un appl. OMI, quand vous avez différentes façons de faire la même chose, j'essaie de toujours choisir celle qui fonctionne le mieux bc. slow performance=== unhappy users. En outre, nous pouvons à la fois répondre à la question d'un PO avec plusieurs réponses (comme vous l'avez fait) et fournir des avantages / inconvénients de chacun d'eux (comme je l'ai fait dans un commentaire). OMI, il est important de remarquer pourquoi toutes les réponses sont différentes, tout en fournissant le même résultat. De plus, nous pouvons écrire du code JavaScript vanille qui fonctionne lentement JavaScriptperformance
:!
1
@pomeh Mon point sur les performances était, si vous vous souciez vraiment des performances, n'utilisez pas jQuery $, classez vos divs spécifiquement et utilisez document.getElemenById/ElementsByClassName, plutôt que de passer par $ce qui fait beaucoup de vérification / analyse de chaîne de votre sélecteur, jQuery n'est pas célèbre pour sa bibliothèque performante. Et honnêtement, je n'ai pas vu une application ralentir à cause d'en appeler $une de trop, si vous avez un site Web qui a ce problème, montrez-moi s'il vous plaît, je suis très intéressé :)
Andreas Wong
2
@pomeh Oui, je suis tout à fait d'accord avec votre point de vue sur JS! = Performance :), en fin de compte, cela revient toujours à nous, les programmeurs, d'écrire du code sensé. Merci pour la courte discussion, passez une bonne journée :)
Andreas Wong
7 
$('.sys').children('input[type=text], select').each(function () { ... });

EDIT: En fait, ce code ci-dessus est équivalent au sélecteur d'enfants .sys > input[type=text]si vous voulez que le descendant select ( .sys input[type=text]) vous devez utiliser les options données par @NiftyDude.

Plus d'information:

Wouter J
la source
vous avez tapé chilrenau lieu dechildren
pomeh
5

Si vous avez plusieurs entrées sous forme de texte dans un formulaire ou un tableau que vous devez parcourir, j'ai fait ceci:

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

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

Ce que j'ai fait, c'est que j'ai vérifié chaque entrée pour voir si le type est défini sur "texte", puis il récupérera cet élément et le stockera dans la liste jQuery. Ensuite, il itérerait dans cette liste. Vous pouvez définir une variable temporaire pour l'itération actuelle comme ceci:

var $currentItem = $(this);

Cela définira l'élément actuel sur l'itération actuelle de votre pour chaque boucle. Ensuite, vous pouvez faire ce que vous voulez avec la variable temp.

J'espère que cela aide n'importe qui!

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

pour le bouclage:

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