jQuery navigieren nur sichtbare Elemente nach

Question

Filterung ich eine einfache Pfeiltaste Navigationsliste gemacht haben (firedevs jquery keynav Plugin), die hier zu sehen sind: https://output.jsbin.com/zowowo

bearbeiten To: https://jsbin.com/zowowo/edit?html,css,js

Es ist richtig funktioniert Jetzt, nachdem Sie auf das Menü Kontaktgruppe 1 oder 2 geklickt haben, um die Liste mit .toggle() zu filtern, navigiert es immer noch durch die Elemente der entfernten/ausgeblendeten Liste. Versucht auch, stattdessen .remove() zu verwenden, aber das selbe Problem bleibt bestehen. Die einzige Möglichkeit, es zum Laufen zu bringen, war eine komplette Aktualisierung der Seite mit anderem HTML.

Ich möchte einfach nur die angezeigten Elemente nach dem Filtern navigieren und die entfernten sollten nicht navigierbar sein. Eine Idee ist es, es zu verstecken, anstatt es zu entfernen und im Skript zu überprüfen, ob es sichtbar ist, ansonsten es zu ignorieren, aber ich bin nicht sicher, wie ich das bewerkstelligen soll, da ich neu im Frontend bin. Es gibt wahrscheinlich verschiedene Möglichkeiten, um das Ergebnis zu erreichen.

Ich würde wirklich schätzen, wenn einige Frontend Pro etwas Licht werfen kann, danke!

Answer 1

Mann, war dieses Ding problematisch.

Also, zuerst habe ich eine Methode innerhalb der Funktion namens eupdate (kurz für externe Aktualisierung) erstellt.

Dann habe ich Ihre Klickereignisse so bearbeitet, dass sie einige Überprüfungen enthalten, um zu sehen, ob die aktuelle Auswahl nach dem Klick sichtbar war. Wenn nicht, machen Sie das erste sichtbare Element als aktuell. Ich musste einen Reset-Strom innerhalb der Methode hinzufügen.

haben Sie einen Blick auf die hier Ausgabe:

https://output.jsbin.com/zegirid

editierbare Version hier:

https://jsbin.com/zegirid/1/edit?html,css,js,console,output

ich einige Notationen hinzugefügt zu zeigen, was ich tat.