[JS] Nummer van element in een ordered list - Softwareontwikkeling

woensdag 13 juni 2007 11:54

Acties:

Verwijderd

Topicstarter

Op m'n site heb ik een ordered list:

HTML:

<ol start='2'>
<li>item 2</li> <!-- li = list item -->
<li>item 3</li>
</ol>

De browser maakt hier natuurlijk een mooi genummerd lijstje van. Weet iemand hoe ik in Javascript aan het nummer van een bepaalde 'list item' kom? Ik weet dat je vanalles kan stylen met CSS.. maar ik heb echt het 'nummer' nodig binnen JS.

woensdag 13 juni 2007 11:57

Acties:

Cyphax

Moderator LNX

Wil je naar bijvoorbeeld het derde item kunnen, of wil je van een bepaald item identificeren dat het het derde item is? Dat is me niet helemaal duidelijk.
In het eerste geval kun je gewoon door de childnodes lopen van je ol (zoals ze hier ook een beetje doen).
In het tweede geval kun je een functie schrijven die door je lijst heenloopt en een tellertje laat ophogen; heb je de goede gevonden (aan de hand van de inhoud bijvoorbeeld of het id van je list item), dan return je de waarde daarvan.
Misschien kan het wel simpeler maar daar komen we dan snel achter

[ Voor 37% gewijzigd door Cyphax op 13-06-2007 11:59 ]

Saved by the buoyancy of citrus

woensdag 13 juni 2007 12:00

Acties:

steffex

kun je niet iets via de HTMLDOM doen met de nodes:

http://w3schools.com/htmldom/dom_nodes.asp

woensdag 13 juni 2007 12:01

Acties:

Verwijderd

Als je die <ol> nu een id geeft en zo alle elementen van die ol opvragen?

JavaScript:

1	var listItems = document.getElementById('elementID').getElementsByTagName('li');

Nu heb je een array van alle <li> elementen. Nu kun je met een for-loopje of foreach zelf een nummer aan elke item hangen.

@boven, haha anders antwoorden we met zen allen het zelfde

[ Voor 9% gewijzigd door Verwijderd op 13-06-2007 12:02 ]

woensdag 13 juni 2007 12:08

Acties:

Verwijderd

Topicstarter

Cyphax:
Ik wil bijvoorbeeld dit:

HTML:

1	<li><script>location.href='http://someurl.com/listitem/'+number_of_list_item;</script></li>

Dit is niet wat ik uiteindelijk wil (het is voor iets compleet anders) maar het idee is hetzelfde.

Het zal er waarschijnlijk op neer komen dat ik inderdaad door alle li's in een ol moet lopen?! Is er ook iets als:

JavaScript:

1 2	object = find_object_by_id; array.indexOf(object);

in JS? Zodat ik.. wanneer ik een array met li-elementen heb.. kan zien welk 'nummer' het in de lijst is?

woensdag 13 juni 2007 12:24

Acties:

Verwijderd

Topicstarter

@j.ostie:
Enig idee hoe ik bij

JavaScript:

1	.getElementsByTagName('li');

voorkom dat ie zowel de li als de /li's teruggeeft?

woensdag 13 juni 2007 12:31

Acties:

Verwijderd

Hmmm, thisisme in deze test situatie hieronder geeft hij netjes een array van 5 objecten terug.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
  <head>
    <title>test</title>
    <script type="text/javascript">
      window.onload = function()
      {
        alert(document.getElementById('olelement').getElementsByTagName('li').length);
      }
    </script>
  </head>
  <body>
    <ol start="2" id="olelement">
      <li> item1 </li>
      <li> item2 </li>
      <li> item3 </li>
      <li> item4 </li>
      <li> item5 </li>
  </body>
</body>

En dit stukje doet ongeveer wat jij wil denk ik

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
  <head>
    <title>test</title>
    <script type="text/javascript">
      window.onload = function()
      {
        var listItem = document.getElementById('olelement').getElementsByTagName('li');
        for ( var c=0; c <= listItem.length; c++ )
        {
          listItem[c].innerHTML = 'item'+ (c +2 );
        }
      }
    </script>
  </head>
  <body>
    <ol start="2" id="olelement">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </body>
</body>

Verder mag ik zeggen dat het wel een rare constructie is om een link te maken aan de hand van de volgorde van de listitems

[ Voor 38% gewijzigd door Verwijderd op 13-06-2007 12:38 ]

woensdag 13 juni 2007 12:51

Acties:

Verwijderd

Topicstarter

Yow. Bedankt voor de code! Ik had ongeveer hetzelfde... alleen hij geeft dus dubbele dingen terug.. Raar. Ik ga ns kijken waar het bij mij aan ligt.

Het is inderdaad raar om daarvan links te maken.. is ook niet helemaal de bedoeling..

Nogmaals bedankt iig!

Pagina: 1

Reageer