2010-06-22 27 views
11

so che due elementi non possono avere lo stesso id. Ma è succede così, che nel mio progetto ho due elementi con lo stesso ID in altri div, come questoÈ normale avere due elementi con lo stesso id in due elementi div con un altro id?

<div id="div1"> 
    <img id="loading" /> 
</div> 
<div id="div2"> 
    <img id="loading" /> 
</div> 

e css:

#div1 #loading 
{ 
    some style here... 
} 
#div2 #loading 
{ 
    another style here... 
} 

funziona bene per me, ma forse non è consigliato fare da così?

Grazie

UPDATE

sì, lo so, Thet posso usare le classi, ed è fortemente consigliato di fare da così, ma voglio sapere non v'è alcun rischio potenziale in questo uso di id? penso no, perché quando ho scritto per esempio

$("#div1 #loading")... diventa un elemento unico. non è vero?

+0

c'è un browser si sa, dove non funziona? – Simon

+2

@Syom: potrebbe funzionare bene con i CSS, ma quasi certamente avrai problemi se proverai a ottenere quegli elementi in Javascript. –

+0

@Andy E's head uso Jquery e li chiamo allo stesso modo in css. es. $ ("# div1 #loading") ...? c'è qualche rischio potenziale? – Simon

risposta

13

un ID deve (dovrebbe) essere unico !!

avrete problemi selezionandolo tramite JS nella maggior parte dei browser - un uso migliore classe

18

dunque cambiare in classe. Non è una buona idea dare id duplicati.

Pensa a due studenti che hanno lo stesso numero di rulli in una classe. Immaginali a ottenere il risultato dell'esame. In che modo la scuola sarà in grado di riconoscere il foglio?

Il tuo modo non è cross browser compatibile e interesserà un sacco durante la codifica JavaScript, e pubblicato sotto forma ecc

È possibile ottenere lo stesso effetto utilizzando la classe

vedere

<div id="div1"> 
    <img class="loading" /> 
</div> 
<div id="div2"> 
    <img class="loading" /> 
</div> 

e css:

4

Gli ID devono essere univoci, quindi id1 e id2 vanno bene , Ma per molti elementi con lo stesso stile, utilizzare una classe HTML e CSS classe selettore:

.loading 
{ 
styles here 
} 

Questi possono essere ripetuto tutte le volte che si desidera in una pagina :)

+1

Classe HTML. Selettore di classe CSS. Non esiste una classe CSS (e il termine è abusato in modi abbastanza diversi da creare confusione) – Quentin

+0

Grazie per la correzione David. :) – Kyle

4

Si Siete a destra, non è raccomandato di farlo. Un ID deve sempre essere univoco (ad es. Se vuoi selezionare l'elemento con javascript). Se vuoi semplicemente aggiungere lo stesso stile ai div, usa solo la classe css.

3

È normale? No.

È raccomandato? Sicuramente no! In realtà è proibito (ma l'applicazione è debole).

Ma (apparentemente) funziona, quindi ...

4

Unique:

In matematica e la logica, la frase "c'è una e una sola" è usata per indicare che esattamente un oggetto con esiste una certa proprietà.

#div1 #loading non rimedia il fatto che si dispone di due istanze di #loading in your document. Quindi, no, non farlo.

2

Id sono utilizzati per distinguere gli elementi, devono essere univoci per diversi motivi, uno di essi è l'uso di javascript, la funzione come getElementById non funzionerà bene se si dispone di un ID duplicato, non sarà possibile prevedere cosa farà su browser diversi poiché JS è auto-implementato su ciascun browser in modo diverso.

Se si desidera utilizzare una struttura come #div carico e # div2 carico sembra chiaro che sia carico hanno usi simili quindi dovrebbero essere le lezioni e sarebbe stato utilizzato come questo

# div1.loading e # div2 .loading

anche uno più di utilizzo di questa sintassi potrebbe essere quella di mettere lo stile comune in .loading come questo

.loading {stile comune sia al carico}

# div1.loading {stile utilizzato solo dal carico in div1}

# div2.loading {stile utilizzato solo dal carico in div2}

7

Il grande motivo è per la manipolazione del DOM JavaScript. Nel tuo caso, se fai qualcosa di simile ...

document.getElementById("loading") 

... JavaScript restituirà il primo elemento e solo il primo elemento. Non avrai modo di accedere al resto senza una seria DOM walking.

1

convalida e purista, è perfettamente funzionante. Ma sarei sicuramente seccato se usassi l'id #loading e trovassi che un effetto jQuery o un effetto CSS si applica a più di 1 elemento. Dimmi se IE6 o 7 o Firefox 1.xo 2.x rovinano quel codice.

4

Solo perché nessun altro ha postato - the HTML spec, section on ID, che dice:

id = nome [CS]

Questo attributo assegna un nome a un elemento. Questo nome deve essere essere univoco in un documento.

-4

Non sono d'accordo sulla gente che dice di usare sempre un "unico", che significa ID diverso ogni volta che ne etichetti uno. A volte è accettabile, come nel caso in cui sto facendo una calcolatrice.

Il javascript sta facendo i calcoli e sta emettendo il risultato in div con id = "totale". Ho bisogno che lo stesso "totale" esatto sia in 2 luoghi diversi. In questo caso, perché non dovrei usare due div diverse con lo stesso ID? Ho bisogno dello stesso numero in entrambe le scatole.Con jQuery, eseguo ed emetto la matematica una volta e popola entrambe le div allo stesso tempo, che è quello che voglio.

Finché aver compreso i rischi in cui se si stavano tirando informazioni da quei 2 div con lo stesso ID, allora io dico sentitevi liberi. Finché non ti confondi e hai bisogno di 2 risultati diversi nello stesso ID div.

+3

Il codificatore prudente utilizza HTML valido per molte ragioni. Il primo tra questi è la considerazione per il manutentore che prenderà il suo codice in seguito. HTML valido utilizza attributi ID univoci. –

+3

Non parlo di molte risposte, ma sono disposto a fare un'eccezione per quelle che incoraggiano le persone a ignorare volontariamente gli standard pubblicati. – Flexo

+0

Sembra che tu stia usando 'id' dove dovresti usare' class'. Se usi un martello come cacciavite, non sorprenderti se rompi qualche vite. –

1

E 'cattiva pratica di usare avevo sull'elemento. Perché darei qualcosa per la comprensione unica con la loro identificazione del nome. E la seconda cosa la usiamo in CSS ma in JavaScript questa cattiva pratica. Quindi buon esempio per questa classe e studente.

Quindi non fare questo.

Problemi correlati