Vermasseln doppelte IDs die JQuery-Selektoren?

Question

Wenn ich zwei Divs hätte, beide mit id="myDiv"

Würde $("#myDiv").fadeOut(); Beide Divs ausblenden?Oder würde es nur beim ersten/zweiten verblassen?Oder gar keine?

Wie ändere ich, welches ausgeblendet wird?

Notiz: Ich weiß, dass doppelte IDs gegen Standards verstoßen, aber ich verwende das modale Popup von fancybox und es dupliziert den angegebenen Inhalt auf Ihrer Seite für den Inhalt des Popups.Wenn jemand einen Weg kennt, dies zu umgehen (vielleicht verwende ich fancybox falsch), lassen Sie es mich bitte wissen.

Answer 1

jQuery genau ein Element, wenn für eine ID abfragen. Ein Array von höchstens einem Element Objekt wird durch $("#foo").get() zurückgegeben werden. Sehen Sie sich die jQuery Dokumentation für weitere Informationen, oder versuchen Sie es selbst.

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

Answer 2

Element-IDs werden soll eindeutig sein. mehrere DIVs der gleichen ID zu haben wäre falsch und unberechenbar, und trotzt den Zweck der Identifikation. Wenn Sie das getan haben:

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

Das würde beide von ihnen ausgeblendet, können Sie sie eine Klasse von myDiv und eindeutigen IDs (oder gar keine) unter der Annahme geben.

Answer 3

"Notiz:Ich weiß, dass doppelte IDs gegen die Standards verstoßen.

Dann tu es nicht.Sie haben bereits zwei Probleme herausgefunden.Es verstößt gegen Standards und stört den Auswahlmechanismus von jQuery (und tatsächlich auch des regulären DOM).Wahrscheinlich wird es in Zukunft noch mehr Probleme geben.

Sehr wahrscheinlich, Sie Sind Wenn Sie Fancybox falsch verwenden, hoffe ich, dass Ihnen jemand hilft, der sich damit auskennt.Oder noch schlimmer: Wenn das Skript selbst fehlerhaft ist, sollten Sie es nicht verwenden.

Answer 4

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

$('[id=myDiv]');

Also, für Ihren Fall, die fadeOut zu all diesen divs anwenden:

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

Und wenn Sie wollen sicherstellen, dass Ihre Seite nicht diese ID hat zweimal dann können Sie die überzähligen entfernen, indem Sie diese:

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

Answer 5

Sie können auch die Route von unterwegs zu finden () verwenden. finden alle Elemente mit dieser ID zurückkehren, und Sie können den Bereich auf einem bestimmten Elternteil begrenzen, wenn versuchen, so etwas wie $(document).find('#myDiv').fadeOut(); benötigt

oder

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

Answer 6

Ich lief in das gleiche Problem. Offenbar, wenn Sie Inhalte auf der Seite erstellen, von dem Sie eine Fancybox öffnen möchten, erstellt es einen Spiegel div des ursprünglichen Inhalts. In meinem Fall wurden die Kontrollen in einem div gewickelt, das schafft namens fancybox "fancy_div"

Ich war in der Lage, die Kontrolle zu wählen und bekommt es Wert ist durch das folgende Format für den Selektor:

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

Ihre Kontrollen können an anderer Stelle innerhalb des Fancybox existieren. das Beste ist am view aussehen zu tun, aber es ist schwierig.

zu der Ansicht Quelle zu erhalten, verwenden Sie die folgende Technik: Diesen Tag auf dem Formular: Wert erhalten Öffnen Sie das Formular, klicken Sie auf den Tag, um die Alarm-Fenster zu öffnen.
Stellen Sie sicher, dass Ihr Cursor innerhalb der Seiteninhalt ist (eine Kontrolle und klicken Sie).
Rechtsklick aus dem Steuer- und wählen Sie „Quelltext anzeigen“.
Ein Bündel von divs vorhanden sind, so suchen die div, dass Ihre Inhalte enthält.

Hope, das hilft.

Answer 7

Vor kurzem hatte ich ein ähnliches Problem. Ich hatte eine einzige Seite, die verschiedene Inhalte über eine Ajax-Last angezeigt. Es gibt einen Knopf, der den Server löst eine PDF-Bild zu erzeugen.

Meine ursprüngliche Lösung war ein Klasse-Selektor zu verwenden, die gut funktioniert, aber verursachte die Reibung mit einem anderen Entwickler. Es gab so viele Klassen bereits in den Links, die eine Klasse unter Verwendung als eine Kennung des Code hässlich gemacht. So habe ich einen Namen Attribut:

<a name="printButton"....

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

Arbeitete nur Dandy!