JavaScript jQuery: Probleme beim Zählen von Elementen in Firefox?

[Mr. Snoot]

edit: ich habs jetzt erstmal so gelöst, dass ich jedem Element eine zusätzliche Klasse odd oder even zuweise und dementsprechend darauf zugreifen kann. Das ist zwar nicht ganz so elegant wie es sein könnte, aber dafür klappt es sicher. Wenn jemand trotzdem eine Lösung oder Erklärung für das Verhalten hat, immer her damit



Hio,

ich habe gerade ein sehr merkwürdiges Verhalten im FF entdeckt, der irgendwie Probleme mit dem Zählen von Elementen hat.

Ich habe hier auf der Startseite oben links die Box zu Grundlagen, die beim Mouseover eine Liste mit den Themen anzeigt. Da einige Titel zu lang sind, sollen die entsprechenden lis beim Mouseover vergrößert werden. Je nachdem ob das li links/rechts (links alle ungeraden lis 1-3-5-7-9, rechts alle geraden 2-4-6-8-10) steht wird das entsprechend rechts/links stehende li verkleinert.

Das funktioniert in allen Browsern problemlos, nur Firefox macht Probleme beim drittletzten Punkt "Aufbau eines n-Kanal...".

Eigentlich sollte dort beim Hovern das vorherige li "Der p-n-Übergang" verkleinert werden, stattdessen wird jedoch das nächste li "Aufbau eines npn-Tra..." angesprochen.

Wenn man sich das ganze in Firebug anschaut, dann sieht man, dass alle lis blass, also nicht sichtbar angezeigt werden. Erst beim Berühren mit der Maus wird das li normal angezeigt. Firefox scheint nun aber nur die lis zu zählen, die eben normal angezeigt werden. Und damit denkt FF, dass "Aufbau eines n-Kanal..." nicht wie es sein soll ein "gerades" li rechts, sondern ein "ungerades" auf der linken Seite ist. Und bei einem linksstehenden li wird automatisch das nächste (eigentlich rechts stehende) li angesprochen.

​

(entsprechend verhält sich auch das vorletzte li "Aufbau eines npn-Tra..." falsch und spricht nicht das nächste, sondern das vorherige an.)


Aktuell ist es zwar so, dass die Liste erst beim Hovern von display:none auf display:block gesetzt wird; aber das Verhalten ändert sich auch nicht, wenn die Liste von Beginn an sichtbar ist (in dem Fall zeigt Firebug die lis auch allesamt normal an). Es hilft auch nicht, die lis zusätzlich zum ul beim Hovern auf display:block zu setzen.


Was mir noch aufgefallen ist, wenn ich mir den Quellcode in FF anschaue, dann erscheint er auch normal. Kopiere ich diesen aber in einen Texteditor, dann tauchen dort plötzlich Leerzeilen auf. Wo kommen die her, verzählt sich FF deswegen bei den lis?

​

(das ist auch kein Anzeigefehler; der Texteditor zeigt mir bei der Leerzeile eine eigene Zeilennummer an)


Das Script zum Ansprechen der lis sieht so aus:

$("ul#grt li.lang:nth-child(odd)").mouseenter(function () {
  $(this).animate({"width": "200px"}, 400)
         .next("li").animate({"width": "82px"}, 400);
});

$("ul#grt li.lang:nth-child(odd)").mouseleave(function () {
  $(this).animate({"width": "141px"}, 400)
         .next("li").animate({"width": "141px"}, 400);
});

$("ul#grt li.lang:nth-child(even)").mouseenter(function () {
  $(this).animate({"width": "200px"}, 400)
         .prev("li").animate({"width": "82px"}, 400);
});
$("ul#grt li.lang:nth-child(even)").mouseleave(function () {
  $(this).animate({"width": "141px"}, 400)
         .prev("li").animate({"width": "141px"}, 400);
});

Vielleicht hat jemand eine Idee, was FF hier verkehrt macht; jeder andere Browser tut, was er tun soll.