Input selettore Jquery [type = text] ')

98

Ho scritto un codice che fondamentalmente seleziona tutti gli input type=textelementi come questo:

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

Come posso cambiarlo per selezionare input[type=text]o select?

javascript jquery

— Jack
fonte

177

Utilizzando un normale selettore CSS:

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

Se non ti piace la ripetizione:

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

O più concisamente, passa l' contextargomento:

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

Nota: internamente jQueryconvertirà quanto sopra in find()equivalente

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

Internamente, il contesto del selettore è implementato con il metodo .find (), quindi $ ('span', this) è equivalente a $ (this) .find ('span').

Personalmente trovo che la prima alternativa sia la più leggibile :), la tua opinione però

— Andreas Wong
fonte

1

Poiché context formsta usando find form, find formè più efficiente di context form(una funzione chiamata evitata). Questo è valido per quasi tutti i selettori utilizzati. Quindi, IMO the find formè più efficiente di normal CSS selector, perché entrambe le parti del selettore sono relative al nodo radice, dove in find form, solo la .sysparte è relativa ad esso, quindi input[type=text],selectviene eseguita su un insieme di elementi molto più piccolo quindi potrebbe essere più veloce (ma è necessario che questo sia verificato dai test)

— pomeh

1

@pomeh posso vedere da dove vieni, ma se le prestazioni di una $chiamata sono così importanti per la tua app, evita del tutto di usare jQuery :). Questa risposta ha cercato di rispondere alla domanda di OP, se fosse stata una questione di prestazioni, questa risposta non sarebbe qui in primo luogo. Grazie comunque per il commento :), lo apprezzo

— Andreas Wong

1

il mio commento non riguardava la prestazione di una $chiamata, ma tutte le $chiamate presenti in una sola applicazione. IMO, quando hai modi diversi di fare la stessa cosa, cerco di scegliere sempre quello che si comporta meglio bc. slow performance=== unhappy users. Inoltre, possiamo entrambi rispondere alla domanda di un OP con più risposte (come hai fatto tu) e fornito vantaggi / inconvenienti di ciascuna di esse (come ho fatto io nel commento). IMO è importante notare perché tutte le risposte sono diverse, pur fornendo lo stesso risultato. Inoltre, possiamo scrivere codice JavaScript vanilla che funzioni lentamente JavaScriptperformance

— :!

1

@pomeh Il mio punto di vista sulle prestazioni era che, se ti interessano davvero le prestazioni, non usare jQuery $, classifica i tuoi div in modo specifico e usa document.getElemenById/ElementsByClassName, piuttosto che passare attraverso il $controllo / analisi delle stringhe del tuo selettore, jQuery non è famoso per la sua libreria performante. E onestamente non ho visto un'app rallentare a causa di chiamarne $una di troppo, se hai un sito web che ha questo problema, per favore mostramelo, sono molto interessato :)

— Andreas Wong

2

@pomeh Sì, sono pienamente d'accordo con il tuo punto di vista su JS! = Performance :), alla fine della giornata, si riduce ancora a noi, i programmatori, a scrivere codice sensato. Grazie per la breve discussione, buona giornata :)

— Andreas Wong

7

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

EDIT: In realtà questo codice sopra è equivalente al selettore di bambini .sys > input[type=text]se vuoi che il discendente select ( .sys input[type=text]) devi usare le opzioni fornite da @NiftyDude.

Maggiori informazioni:

— Wouter J
fonte

hai digitato chilreninvece dichildren

— pomeh

5

Se hai più input come testo in un modulo o una tabella che devi scorrere, ho fatto questo:

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

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

Quello che ho fatto è stato controllare ogni input per vedere se il tipo è impostato su "text", quindi prenderà quell'elemento e lo memorizzerà nell'elenco jQuery. Quindi, itererà attraverso quell'elenco. Puoi impostare una variabile temporanea per l'iterazione corrente in questo modo:

var $currentItem = $(this);

Questo imposterà l'elemento corrente sull'iterazione corrente del tuo per ogni ciclo. Quindi puoi fare quello che vuoi con la variabile temp.

Spero che questo aiuti chiunque!

— Jason Cidras
fonte

3

$('input[type=text],select', '.sys');

per il loop:

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

— il codeparadox
fonte