Verursachen doppelte ID-Werte Probleme für jQuery-Selektoren?

Question

Wenn ich zwei Divs hätte, beide mit der ID="myDiv", würden beide Divs mit $("#myDiv").fadeOut(); ausgeblendet werden? Oder würde nur das erste/zweite ausgeblendet werden? Oder gar keines?

Wie kann ich festlegen, welches ausgeblendet wird?

Hinweis: Ich weiß, dass doppelte IDs gegen die Standards verstoßen, aber ich verwende das fancybox-Modalpopup und es dupliziert den spezifizierten Inhalt auf Ihrer Seite für den Inhalt des Popups. Falls jemand einen Weg kennt, dies zu umgehen (vielleicht benutze ich fancybox falsch), lassen Sie es mich bitte wissen.

Answer 1

Element-IDs sollten eindeutig sein. Mehrere DIVs mit derselben ID wären falsch und unvorhersehbar und widersprechen dem Zweck der ID. Wenn Sie das getan haben:

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

Dann würden beide ausgeblendet werden, vorausgesetzt Sie haben ihnen eine Klasse von myDiv und eindeutige IDs (oder gar keine) gegeben.

Answer 2

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

Dann mach es nicht. Sie haben bereits zwei Probleme herausgefunden. Es verstößt gegen Standards und stört die Auswahlmechanismen von jQuery (und tatsächlich des regulären DOMs). Es wird wahrscheinlich weitere Probleme geben.

Möglicherweise verwenden Sie fancybox tatsächlich falsch, in diesem Fall hoffe ich, dass Ihnen jemand, der damit vertraut ist, hilft. Oder noch schlimmer, wenn das Skript selbst fehlerhaft ist, sollten Sie es nicht verwenden.

Answer 3

JQuery entspricht genau einem Element beim Abfragen einer ID. Ein Array von höchstens einem Element Objekt wird von $("#foo").get() zurückgegeben. Siehe die jQuery-Dokumentation für weitere Informationen oder probieren Sie es selbst aus.

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

Answer 4

Da $('#myDiv') nur das erste div mit dieser ID zurückgibt, müssen Sie alle Elemente mit dieser ID finden, indem Sie diesen Trick verwenden:

$('[id=myDiv]');

Also, für Ihren Fall, um das Ausblenden auf alle diese Divs anzuwenden:

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

Und wenn Sie sicherstellen möchten, dass Ihre Seite diese ID nicht zweimal hat, können Sie die zusätzlichen durch folgendes entfernen:

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

Answer 5

Sie können auch den Weg über die Verwendung von find() gehen. find wird alle Elemente mit dieser ID zurückgeben, und Sie können den Bereich auf ein bestimmtes übergeordnetes Element beschränken, wenn nötig, versuchen Sie etwas wie $(document).find('#myDiv').fadeOut();

oder

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