2009-06-27 13 views
7

Wenn ich zwei Divs hatte, beide mit ID = "myDiv"Ersetzt doppelte IDs jquery Selektoren?

Würde $("#myDiv").fadeOut(); beide Divs verblassen? Oder würde es nur die erste/zweite verblassen? Oder gar nicht?

Wie ändere ich, welchen es ausblendet?

Hinweis: Ich weiß, doppelte IDs ist gegen Standards, aber ich verwende die fancybox Modal Popup und dupliziert angegebene Inhalte auf Ihrer Seite für den Inhalt des Popup. Wenn jemand einen Umweg darüber weiß (vielleicht benutze ich fancybox falsch) lass es mich wissen.

+1

Haben Sie es versucht? –

+0

Ja, aber ich hatte gehofft, wenn ich jemand anderen fragen würde, könnten sie mir eine Erklärung geben, warum nur der erste ausgeblendet wird. – Matt

+0

Wird es dupliziert? oder "verschiebe" den Inhalt in deine Pop-up-Position? – scunliffe

Antwort

6

jQuery stimmt bei der Abfrage einer ID genau mit einem Element überein. Ein Array von höchstens einem Element Objekt wird von $("#foo").get() zurückgegeben. Weitere Informationen finden Sie unter jQuery documentation oder probieren Sie es selbst aus.

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

$ ("# foo") gibt kein Array zurück. Es gibt ein Objekt mit mehreren Funktionen zurück. $ ("# foo"). get() ist ein Array. –

+0

In der Tat können Sie das jquery-Objekt indizieren, z. B. $ ('. Foo') [0]. Ist dies ein Array? – redsquare

+0

Wie RedSquare sagte, können Sie auf Elemente zugreifen, die Indizes verwenden, und jQuery bietet auch eine "length" -Eigenschaft. In diesem Sinne können Sie es wie ein Array behandeln. Die anderen Array-Funktionen (wie Pop, Join usw.) werden jedoch nicht bereitgestellt. Ich habe meine Antwort aktualisiert, um die get-Funktion einzuschließen, wie Matthew darauf hingewiesen hat. –

11

Element-IDs sollen eindeutig sein. Mehrere DIVs derselben ID zu haben, wäre falsch und unvorhersehbar und widerspricht dem Zweck der ID. Wenn Sie dies taten:

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

, dass sie beide aus verblassen würde, vorausgesetzt, Sie ihnen eine Klasse von myDiv und eindeutigen IDs (oder gar keine) geben.

7

„Anmerkung: Ich weiß, dass die doppelte ID ist gegen Standards“

Dann tut es nicht. Sie haben bereits zwei Probleme erkannt. Es verstößt gegen Standards und stört den Auswahlmechanismus von jQuery (und in der Tat des regulären DOM). Es wird wahrscheinlich in Zukunft weitere Probleme geben.

Ganz wahrscheinlich, Sie sind mit fancybox falsch, in diesem Fall hoffe ich jemand damit vertraut hilft Ihnen. Oder noch schlimmer, wenn das Skript selbst fehlerhaft ist, sollten Sie es nicht verwenden.

+0

, also soll ich dann mein eigenes modales Popup schreiben? Ich weiß, dass ich nicht die einzige bin, die fancybox benutzt. Das beantwortete meine Frage überhaupt nicht wirklich ... – Matt

+0

Ich schlug nie vor, dass Sie Ihren eigenen modalen Dialog schreiben. –

0

Ich lief auf das gleiche Problem. Wenn Sie auf der Seite, auf der Sie eine Fancybox öffnen möchten, Inhalt erstellen, wird anscheinend ein Spiegel-Div des ursprünglichen Inhalts erstellt. In meinem Fall wurden die Kontrollen in einem div gewickelt, dass fancybox genannt schafft „fancy_div“

ich die Kontrolle wählen konnte und bekommt es Wert ist durch das folgende Format für den Selektor:

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

Ihre Steuerelemente können an anderer Stelle in der Fancybox vorhanden sein. Am besten ist es, sich die Viewsource anzuschauen, aber es ist schwierig.

der Ansicht Quelle zu erhalten, verwenden Sie die folgende Technik: Dieses Tag auf dem Formular: Get Wert Formular öffnen, klicken Sie auf den Tag, um die Alarm-Fenster zu öffnen.
Stellen Sie sicher, dass sich der Cursor innerhalb des Seiteninhalts befindet (suchen Sie ein Steuerelement und klicken Sie auf).
Klicken Sie mit der rechten Maustaste aus der Steuerung und wählen Sie "Quelle anzeigen".
Eine Reihe von divs existieren, suchen Sie also nach dem div, das Ihren Inhalt enthält.

Hoffe, das hilft.

1

Da $ ('# myDiv') wird nur das erste div mit dieser ID zurückkehren, werden Sie alle Elemente mit dieser ID finden müssen, mit diesem Trick:

$('[id=myDiv]'); 

Also, für Ihren Fall, die fadeOut auf alle diese divs anzuwenden:

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

Und wenn Sie möchten, um Ihre Seite stellen Sie sicher, nicht diese ID hat zweimal dann können Sie die überzähligen entfernen, indem Sie diese:

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

Ich denke, dass alle zustimmen, dass doppelte IDs eine der schlimmsten Dinge sind, die man tun kann (tut weh kleine Kätzchen und macht traurige Pandas). Obwohl dieser Trick mir geholfen hat, einen kleinen Fehler in einer kleinen Dienstprogramm-Webanwendung zu beheben, die ich geschrieben habe. Tatsächlich habe ich Tabellen versteckt, die als Vorlagen dienen (ich kopiere sie, um neue zu generieren), und diese Vorlagen enthalten IDs, weil ich diese IDs dann zum Übersetzen auf der Client-Seite verwende (ja, ich habe hier Spaß mit JavaScript ^) ^) – dSebastien

1

Sie können auch die Route mit find() gehen. finden kehren alle Elemente mit dieser ID, und Sie können den Umfang auf eine bestimmte Eltern beschränken, wenn nötig etwas wie $(document).find('#myDiv').fadeOut();

oder

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

ich ein ähnliches Problem hatte vor kurzem. Ich hatte eine einzelne Seite, die durch eine Ajax-Last unterschiedlichen Inhalt zeigte. Es gibt eine Schaltfläche, die den Server dazu veranlasst, ein PDF-Bild zu generieren.

Meine ursprüngliche Lösung war, einen Klassenselektor zu verwenden, der gut funktionierte, aber Reibung mit einem anderen Entwickler verursachte. Es gab bereits so viele Klassen in den Links, dass die Verwendung einer Klasse als Bezeichner den Code hässlich machte. Also habe ich ein Namensattribut verwendet:

<a name="printButton".... 

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

Arbeitete nur Dandy!