counter-increment

[jerry]

hallo, ich wende
ul.liste {
counter-reset:listpoint;
list-style-type:none;
}
ul.liste li:before {
content: counter(listpoint) ".";
counter-increment:listpoint;
}
auf eine liste an deren reihenfolge sich mit einem javasript verändern lässt.
durch den counter zeigt der browser bei jedem <li> eine zahl je nachdem an welcher stelle sich das listenelement grad befindet.
wenn listenelement "3" also zb an die erste stelle verschoben wird, schreibt der counter eine "1".
ich möchte den jeweiligen wert in einer variable speichern um ihn an meine datenbank zu übergeben.
meine frage ist also wie ich zugriff auf den aktuellen counterwert der einzelnen listenelemente bekomme.
da er sie mir richtig hinschreibt muss man doch irgendwie drankommen.

[ChrisB]

Hi,

hallo, ich wende
ul.liste {
counter-reset:listpoint;
list-style-type:none;
}
ul.liste li:before {
content: counter(listpoint) ".";
counter-increment:listpoint;
}
auf eine liste an deren reihenfolge sich mit einem javasript verändern lässt.

Du bastelst dir also das Verhalten einer OL mit einer UL nach? Warum?

wenn listenelement "3" also zb an die erste stelle verschoben wird, schreibt der counter eine "1".

Das waere bei einer OL auch der Fall - und das ohne zusaetzliche CSS-Angaben, die manche Browser noch nicht verstehen.

ich möchte den jeweiligen wert in einer variable speichern um ihn an meine datenbank zu übergeben.
meine frage ist also wie ich zugriff auf den aktuellen counterwert der einzelnen listenelemente bekomme.
da er sie mir richtig hinschreibt muss man doch irgendwie drankommen.

Eventuell mit getComputedStyle ...
Aber wozu ueberhaupt? Wenn du das Element selber per JavaScript "verschiebst", also innerhalb der Liste umhaengst - dann weisst du doch auch, wohin, und kannst selber ermitteln, welcher Listenpunkt welche Position hat.

Ganz einfach waere es, einfach die LI unterhalb der Liste in einer Schleife zu durchlaufen - dabei bekommst du sie, da nodeLists ja immer "lebendig" sind, in der jeweils aktuellen Reihenfolge.

MfG ChrisB

[jerry]

Du bastelst dir also das Verhalten einer OL mit einer UL nach? Warum?
Das waere bei einer OL auch der Fall - und das ohne zusaetzliche CSS-Angaben, die manche Browser noch nicht verstehen.

habe also auf ol umgestellt

die neue die frage die sich mir jetzt stellt ist wie bekomme ich die jeweilige listennummer als value in eine form um sie an die datenbank zu schicken? vereinfacht sieht es im moment so aus:

<form id="test_Form" name="test_Form" method="post" action="test-exec.php">
<ol id="ul1">
 <li class="list1" id="li1_1">
  <input name="test1" type="hidden" id="test1"  value="1" />
 </li>
 <li class="list1" id="li1_2">
  <input name="test2" type="hidden" id="test2"  value="2" />
 </li>
 <li class="list1" id="li1_3">
  <input name="test3" type="hidden" id="test3"  value="3" />
 </li>
</ol>
<input type="submit" name="Submit" value="Submit" />
</form>

jedem listenelement ist ein eintrag in der db zugeordnet und submit updatet mir auch brav den entsprechenden wert mit dem eingetragenen value. natürlich soll sich value ändern wenn sich die position des listenelements per drag and drop ändert. also möchte ich value mit der zahl der aktuellen listenposition ersetzten.

und danke erstmal für die schnellen antworten

[ChrisB]

Hi,

natürlich soll sich value ändern wenn sich die position des listenelements per drag and drop ändert. also möchte ich value mit der zahl der aktuellen listenposition ersetzten.

Dann durchlaeufst du am besten vor dem Absenden einmal alle LI-Elemente in einer Schleife, und laesst dabei den value auf den aktuellen Zaehlerstand der Schleife setzen.

(Vorausgesetzt, das drag&drop-Script aendert auch wirklich die Position der LI im DOM.)

MfG ChrisB

[jerry]

(Vorausgesetzt, das drag&drop-Script aendert auch wirklich die Position der LI im DOM.)

diese funktion hab ich am ende der liste auf einem button liegen:
(gehört zum dragndrop script und ist zwar abgeändert aber nicht von mir)

showOrder: function(){
 var parseList = function(ul, title){
  var items = ul.getElementsByTagName("li");
  var out = title + ": ";
   for (i=0;i<items.length;i=i+1){
    out += items[i].id + " ";
   }
   return out;
 };
 var ul1=Dom.get("ul1");
  alert(parseList(ul1, "List 1") + "\n");
  document.write(parseList(ul1, "List 1") + "\n");
},

sie giebt zb das aus wenn ich listenelement3 an die erste stelle schiebe:
List 1: li1_3 li1_1 li1_2
daher denke ich das dei die Position der LI im DOM ordentlich geändert wird.
leider stehe ich aber trotzdem wie der ochs vorm berg und wäre für jeden schnipsel code oder n beispiel zu meinem prob dankbar.

<form id="test_Form" name="test_Form" method="post" action="test-exec.php">
<ol id="ul1">
 <li class="list1" id="li1_1">
  <input name="test1" type="hidden" id="test1"  value="1" />
 </li>
 <li class="list1" id="li1_2">
  <input name="test2" type="hidden" id="test2"  value="2" />
 </li>
 <li class="list1" id="li1_3">
  <input name="test3" type="hidden" id="test3"  value="3" />
 </li>
</ol>
<input type="submit" name="Submit" value="Submit" />
</form>

vor allem wie ich den wert dann konkret in value bekomme.

Dann durchlaeufst du am besten vor dem Absenden einmal alle LI-Elemente in einer Schleife, und laesst dabei den value auf den aktuellen Zaehlerstand der Schleife setzen.

hört sich einfach an aber ich bekomms nicht hin. haß

gruß jerry

[ChrisB]

Hi,

Dann durchlaeufst du am besten vor dem Absenden einmal alle LI-Elemente in einer Schleife, und laesst dabei den value auf den aktuellen Zaehlerstand der Schleife setzen.

hört sich einfach an aber ich bekomms nicht hin.

"Bekomme es nicht hin" ist als Problembeschreibung unbrauchbar.

Beschreibe, was du versucht hast, und woran es scheitert.

MfG ChrisB

[Steel]

Hi!

Hast Du mal sowas wie

document.getElementById('IDdeinerul').getElementsByTagName('li')[i].firstChild.data

versucht? Kurz durch die li iterieren und pruefen in welchem der gesuchte Wert steht.