2012-05-18 16 views
75

Ho scritto un codice che consente di selezionare in fondo tutti input type=text elemento come questo:Jquery ingresso selettore [type = text] ')

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

Come faccio a cambiare per selezionare input[type=text] o select?

risposta

136

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ù conciso, passare l'argomento context:

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

Nota: Internamente jQuery convertirà il precedente a find() equivalente

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

Internamente, il contesto selettore viene implementato con il metodo .find(), in modo $ ('arco', questo) è equivalente a $ (this) .find ('arco').

Personalmente trovo la prima alternativa di essere il più leggibile :), anche se il vostro introito

+0

Dato che 'context form' sta usando' find form', 'find form' è più efficiente del' context form' (una funzione di chiamata evitata). Questo è valido per quasi tutti i selettori usati.Quindi, IMO il 'find form' è più efficiente del' normale selettore CSS', perché entrambe le parti del selettore sono relative al nodo radice, dove nel 'find form', solo la parte' .sys' è relativa a esso, quindi 'input [type = text], select' viene eseguito su un insieme di elementi molto più piccolo, quindi potrebbe essere più veloce (ma è necessario verificarlo con i test) – pomeh

+0

@pomeh Posso vedere da dove vieni, ma se la prestazione di una chiamata '$' è quella * importante * della tua app, ti preghiamo di evitare di utilizzare jQuery complessivamente :). Questa risposta ha cercato di rispondere alla domanda di OP, se fosse stata una questione di prestazioni, questa risposta non sarà qui in primo luogo. Grazie comunque per il commento :), lo apprezzo –

+0

il mio commento non riguardava il perf a one '$' call, ma su tutti '$' chiama il presente in una appl. IMO, quando hai diversi modi di fare la stessa cosa, cerco sempre di scegliere quello che esegue meglio bc. 'prestazioni lente' ===' utenti infelici'. Inoltre, possiamo ** entrambi ** rispondere alla domanda di un OP con risposte multiple (come hai fatto tu) e fornire vantaggi/disagio a ciascuno di essi (come ho fatto nel commento). IMO è importante notare perché tutte le risposte sono diverse, pur fornendo lo stesso risultato. Inoltre, possiamo scrivere codice JavaScript vanilla che funziona lentamente: 'JavaScript'! ==' performance' – pomeh

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

EDIT: In realtà questo codice sopra è equivalente al selettore bambini .sys > input[type=text] se si desidera che il discendente di selezione (.sys input[type=text]) è necessario utilizzare le opzioni fornite da @NiftyDude.

Maggiori informazioni:

+0

hai digitato 'chilren' invece di' children' – pomeh

+0

e l'ho risolto –

+0

@NiftyDude grazie. Ho aggiunto alcuni link di riferimento. –

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

per looping:

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

Se si dispone di ingressi multipli come il testo in una forma o una tabella che è necessario per scorrere, ho fatto questo:

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

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

Quello che ho fatto è stato ho controllato ogni ingresso per vedere se il tipo è impostato su "testo", allora sarà afferrare tale elemento e negozio nella lista jQuery. Quindi, itererà attraverso quella lista. È possibile impostare una variabile temporanea per l'iterazione corrente in questo modo:

var $currentItem = $(this); 

Questo imposterà l'elemento corrente per l'iterazione corrente della vostra per ogni ciclo. Quindi puoi fare tutto ciò che vuoi con la variabile temp.

Spero che questo aiuti chiunque!