Gli ID duplicati rovinano i selettori jquery?

Question

Se avessi due div, entrambi con id = "myDiv"

$("#myDiv").fadeOut(); svanire entrambe le uscite? O svanirebbe solo il primo/secondo? O niente del tutto?

Come si modifica quale si dissolve?

Nota: So che gli ID duplicati sono contro gli standard, ma sto usando il popup modal di fancybox e duplica il contenuto specificato nella pagina per il contenuto del popup. Se qualcuno sa come aggirare questo (forse sto usando fancybox sbagliato) per favore fatemelo sapere.

Answer 1

jQuery corrisponde esattamente a un elemento durante la ricerca di un ID. Un array di al massimo un oggetto Element verrà restituito da $("#foo").get(). Vedi lo jQuery documentation per ulteriori informazioni, o provalo tu stesso.

$(function() { 
    alert($("#foo").length); 
}); 

Answer 2

Gli ID elemento dovrebbero essere unici. Avere più DIV dello stesso ID sarebbe errato e imprevedibile, e sfidare lo scopo dell'ID. Se avete fatto queste cose:

$('.myDiv').fadeOut(); 

che sarebbe svanito entrambi fuori, supponendo che si dà loro una classe di myDiv e ID univoci (o nessuno).

Answer 3

"Nota: Lo so duplicati id è contro norme"

Allora non farlo. Hai già capito due problemi. Viola gli standard e interferisce con il meccanismo di selezione di jQuery (e in effetti con il DOM regolare). Probabilmente ci saranno più problemi in futuro.

Molto probabilmente, si sono utilizzando fancybox errato, nel qual caso spero che qualcuno abbia familiarità con esso ti aiuta. O peggio, se la sceneggiatura stessa è difettosa, non dovresti usarla.

Answer 4

Mi sono imbattuto nello stesso problema. Apparentemente, quando crei contenuti nella pagina da cui desideri aprire un Fancybox, crea un div spec del contenuto originale. Nel mio caso, i controlli sono stati avvolti in un div che fancybox crea il nome, "fancy_div"

ero in grado di selezionare il controllo e ottenere il suo valore utilizzando il seguente formato per il selettore:

$ (' #fancy_div [id = InputText] '). val();

i controlli possono esistere altrove all'interno di Fancybox. la cosa migliore da fare è guardare all'origine, ma è complicato.

per arrivare alla fonte di vista, utilizzare la seguente tecnica: Luogo questo tag sul modulo: valore Get Aprire il modulo, fare clic sul tag per aprire la finestra di avviso.
Assicurarsi che il cursore si trovi all'interno del contenuto della pagina (trovare un controllo e fare clic).
Fare clic con il pulsante destro del mouse fuori dal controllo e selezionare "visualizza origine".
Un gruppo di div esiste, quindi cerca il div che contiene il tuo contenuto.

Spero che questo aiuti.

Answer 5

Dal $ ('# myDiv') restituisce solo il primo div con quel ID, dovrete trovare tutti gli elementi con ID che utilizza questo trucco:

$('[id=myDiv]'); 

Quindi, per il vostro caso, di applicare le fadeOut a tutti quei div:

$('[id=myDiv]').fadeOut(); 

E se si vuole fare che la pagina non ha questo ID due volte, quindi è possibile rimuovere quelli in più in questo modo:

$('[id=myDiv]:gt(0)').remove(); 

Answer 6

È anche possibile seguire il percorso di utilizzo di find(). trovare restituirà tutti gli elementi con quel ID, ed è possibile limitare l'ambito a un particolare genitore, se necessario, provare qualcosa di simile $(document).find('#myDiv').fadeOut();

o

$('.parentElement').find('#myDiv').fadeOut(); 

Answer 7

Recentemente ho avuto un problema simile. Avevo una singola pagina che mostrava contenuti diversi attraverso un caricamento Ajax. C'è un pulsante che attiva il server per generare un'immagine PDF.

La mia soluzione originale era usare un selettore di classe, che funzionava bene, ma causava attrito con un altro sviluppatore. C'erano così tante classi già nei collegamenti che usando una classe come identificatore rendevano il codice brutto. Quindi ho usato un attributo nome:

<a name="printButton".... 

$('a[name="printButton"]').on('click',function(){.... 

Ha funzionato solo dandy!