Position eines <li> Elements in einer UL-Liste ermitteln

[raw-venture-ad]

Einen wunderschönen Montag-Morgen,

ich habe die Suche und Google bereits bemüht, komme aber momentan trotzdem nicht weiter.

Mein Problem ist simpel:
Ich möchte anhand der ID eines <li>-Elements herausfinden, an welcher Zählerstelle das <li>-Element innerhalb einer <UL>-Liste steht.

Praktisch sieht das so aus: Ich möchte ab einer bestimmten Zählerstelle der <UL>-Liste diese Liste komplett durchlaufen. Für den Durchlauf der kompletten Liste (von Stelle 0) sieht das ja so aus:

  
var listEntries = document.getElementsByTagName("li");  
for(var i=0; i<listEntries.length; i++) {  
   // do something  
}  

Ich möchte jetzt aber (einfach als Performance-Verbesserung) jedoch nicht bei Stelle 0 starten, sondern ab einer bestimmten Stelle.

Geht das irgendwie? Habe es mit listEntries.elements[] und listEntries.entries[] versucht, leider erfolglos. Jedes <li>-Element hat bei mir eine eindeutige ID über die ich es identifizieren kann.

Vielen Dank !

r-v-a

[nam]

Hi

Einen wunderschönen Montag-Morgen,

Gleichfalls!

Mein Problem ist simpel:
Ich möchte anhand der ID eines <li>-Elements herausfinden, an welcher Zählerstelle das <li>-Element innerhalb einer <UL>-Liste steht.

So simpel ist dein Problem nicht. <ul> steht für »unordered list« also »ungeordnete Liste«; wenn du also Zählerstellen benötigst ist das die bestimmt falsche Auszeichnung!

var listEntries = document.getElementsByTagName("li");

Damit findest du *alle* <li>-Elemente deiner Seite. Mach die Suche spezifischer, sonst hast du früher oder später Probleme!

for(var i=0; i<listEntries.length; i++) {
   // do something

Wie genau funktioniert hier der Zugriff auf dein Listenelement?

Ich möchte jetzt aber (einfach als Performance-Verbesserung) jedoch nicht bei Stelle 0 starten, sondern ab einer bestimmten Stelle.

Dann starte die for-Schleife mit entsprechendem Initialwert, also statt var i=0, var i=deinInitialWert.

Gruss,
Mathias

[raw-venture-ad]

Hallo Mathias,

danke für deine Nachricht.

Keine Angst, auf dieser Seite gibt es nur die benötigten <li>-Elemente. Das ist Softwaretechnisch so durchdacht und gewollt.

Der Zugriff auf das Listenelement erfolgt so (als Beispiel um die ID des <li>-Elements zu ermitteln):

  
for(var i=0; i<listEntries.length; i++) {  
   var id = listEntries[i].getAttribute("id");  
}  

Genau den Initialwert möchte ich ja gerne ermitteln. Eben um nicht immer bei 0 anfangen zu müssen. Ich möchte also den Initialwert anhand der ID des <li>-Elements rausfinden. Denn wie gesagt, die ID des Elements kenne ich, nur die Position in der Liste nicht.

[nam]

Hi

Keine Angst, auf dieser Seite gibt es nur die benötigten <li>-Elemente. Das ist Softwaretechnisch so durchdacht und gewollt.

Da hab ich brutal Angst. Du gräbst dir die eigene Grube. Was wenn du plötzlich an anderer Stelle eine andere Liste einfügen möchtest?
Ich würde das aus leidiger Erfahrung nie so machen!

Genau den Initialwert möchte ich ja gerne ermitteln. Eben um nicht immer bei 0 anfangen zu müssen. Ich möchte also den Initialwert anhand der ID des <li>-Elements rausfinden. Denn wie gesagt, die ID des Elements kenne ich, nur die Position in der Liste nicht.

Dann sehe ich keine andere Lösung als zwei Schleifen:
Die 1. Schleife durchläuft die Liste so lange, bis die gesuchte ID gefunden ist -> Schleife abbrechen. Der Schleifenzähler (i muss ausserhalb der Schleife initialisiert werden) entspricht dann der Position des Elements mit der gesuchten ID.
Die 2. Schleife startet dann mit dem ermittelten i.

Gruss,
Mathias

[ChrisB]

Hi,

Genau den Initialwert möchte ich ja gerne ermitteln. Eben um nicht immer bei 0 anfangen zu müssen. Ich möchte also den Initialwert anhand der ID des <li>-Elements rausfinden. Denn wie gesagt, die ID des Elements kenne ich, nur die Position in der Liste nicht.

Aendert sich denn der Umfang der Liste (clientseitig)?

Sonst reicht vielleicht auch eine initiale Zaehlschleife, die den Zaehlerstand als zusaetzliche Eigenschaft an jedes LI-Element anfuegt, liElement[i].pos = i; o.ae.

MfG ChrisB

[MudGuard]

Hi,

Ich möchte anhand der ID eines <li>-Elements herausfinden, an welcher Zählerstelle das <li>-Element innerhalb einer <UL>-Liste steht.

Brauchst Du wirklich die Zählerstelle, oder willst Du nur über die weiteren li laufen?
Falls letzteres:
Suche über nextSibling des Elements, bis dieses wieder ein Elementknoten mit Namen li ist (dazwischen können Whitespace-Textnodes, Kommentare-Nodes u.ä. liegen).

cu,
Andreas

[peterS.]

gruss r-v-a,

deine problemstellung ist ein ideales beispiel, um loesungsansaetze
auf basis von array-iteratoren zu demonstrieren:

var getPositionOfListEntry = (function (obj/*String|HTMLLIElement*/) {  
  
  var idx;/*  
  
  »» Ich möchte anhand der ID eines <li>-Elements herausfinden, an welcher  
  Zählerstelle das <li>-Element innerhalb einer <UL>-Liste steht.*/  
  
  obj = ((typeof obj == "string") ? (document.getElementById(obj)) : (obj));  
  
  if (obj && (typeof obj.nodeName == "string") && (obj.nodeName.toLowerCase() == "li")) {  
  
    idx = [link:http://forum.de.selfhtml.org/archiv/2007/9/t159017/#m1034856@title=Array.indexOf](obj.parentNode.getElementsByTagName("li"), obj);  
  }  
  return idx; /*undefined|-1|N*/  
  
});/*  
  
  

> Jedes <li>-Element hat bei mir eine eindeutige ID über die ich es identifizieren kann.*/  
  
  
var idx;  
idx = getPositionOfListEntry("entryId");  
idx = getPositionOfListEntry(document.getElementById("entryId"));  
idx = getPositionOfListEntry(document.getElementsByTagName("li")["entryId"]);  
idx = getPositionOfListEntry(document.getElementsByTagName("ul")["listId"].getElementById("entryId"));  
idx = getPositionOfListEntry(document.getElementsByTagName("ul")["listId"].getElementsByTagName("li")["entryId"]);

so long - peterS. - [e-mail]

[peterS.]

hallo again in die runde,

var getPositionOfListEntry = (function (obj/*String|HTMLLIElement*/) { ...

... muss natuerlich konsequenterweise folgendes wording bekommen:

var getIndexOfListEntry = (function (obj/*String|HTMLLIElement*/) { ...

so long - peterS. - [e-mail]

[raw-venture-ad]

Danke an alle!

Problem ist dank Array-Iteratoren gelöst.

Zwar wollte es mit Array.prototype... nicht klappen, habe mir dann die Funktion einfach in meine Klasse mit übernommen. Funktioniert prima.

Eine abschließende Frage vielleicht noch:
Welche Vorgehensweise ist wohl von der Performance her besser? prototype oder eigene Funktion?

DANKE nochmals!

MfG
Matthias

[peterS.]

hallo again Matthias,

Zwar wollte es mit Array.prototype... nicht klappen, ...

was meinst Du damit? das beispiel funktioniert ausschließlich
nur mit der generischen methode »Array.indexOf«, da hier listen-
strukturen verarbeitet werden, die eben nicht einer nativen Array-
implementierung entsprechen. oder anders ausgedrueckt - es gibt
keine methode [indexOf] fuer [NodeList]s bzw. [HTMLCollection]s.

die *neuen* generischen und prototypischen array-methoden sind
seit dem mozilla-eigenen JavaScript 1.6-release bestandteil des
dortigen sprachkerns und koennen deshalb nur in solchen gecko-
browsern ohne grosse verrenkungen abgegriffen werden. den anderen
muss man schon handgekloeppelte loesungen zur verfuegung stellen.

Eine abschließende Frage vielleicht noch:
Welche Vorgehensweise ist wohl von der Performance her besser?
prototype oder eigene Funktion?

siehe oben:

die ausgangsbedingungen lassen nur den generischen loesungsansatz
»Array.indexOf« zu. diese methode muss browsern, denen soetwas
unbekannt ist, beigebracht werden.

eigenwerbung - lesetip: NodeLists und Array-Iteratoren - Scripte schneller entwickeln

so long - peterS. - [e-mail]