Hvordan vælges alle elementer af typen <li> pånær ét

Sådan her?

<script>
function changecolor(e) {
    ul = document.getElementById('mytest');
    var li_elements = ul.getElementsByTagName('li');

        for (var i=0; i<li_elements.length; i++) {
            li_elements[i].className = 'red';
        }
    e.className = 'green';
}
</script>
<style>
li.red {
    background-color: red;
}
li.green {
    background-color: green;
}
</style>
<ul id="mytest">
    <li onclick="changecolor(this);">Test a</li>
    <li onclick="changecolor(this);">Test b</li>
    <li onclick="changecolor(this);">Test c</li>
    <li onclick="changecolor(this);">Test d</li>
</ul>

Mit eks. er gjort en s mule mere simpelt. Dir svar virker perfekt i eks. men desværre ikke i den lidt mere komplecerede struktur.

<div id="myTest">
  <ul>
    <li onclick="changeColor(this);">
      Test a
      <ul>
        <li>
      Test a.1
    </li>
    <li>
          Test a.2
      <ul>
        <li>
          Test a.2.1
        </li>
      </ul>
    </li>
    <li>
      Test a.3
    </li>
      </ul>
    </li>
    <li>
      Test b
    </li>
    <li>
      Test c
      <ul>
        <li>
      Test c.1
    </li>
      </ul>
    </li>
    <li>
      Tect d
    </li>
  </ul>
</div>

Først led af <ul> skal altid være grøn, men <li> med tilhørende <ul> skal den tilhørende <ul> blive grøn. De resterende <ul> i diven skal skifte til rød.

Lige nu sætter jeg farven på den tilhørende <ul> med følgende kode:
elm.getElementsByTagName('ul')[0].style.background = 'green';

Så problemet ligger i at de resterende skifter til eller forbliver røde.

Jeg har forsøgt mig med:
elm = document.getElementById('myTest').getElementByTagName('ul');
elm.style.background = 'red';

Har også forsøgte at løbe ovenstående igennem med en for løkke, hvor jeg undlod elm[0] da den altid skal være rød.

Men ingen af delene virker :(

Så har jeg tænkt at jeg ville lave en if sætning der sammenlignede de fundende <ul>'er med mit elm. Hvis de er lig hinanden sættes farven til grøn ellers sættes den til rød. Dette gør blot aller <ul>'erne grønne. :(

Jeg forstår ikke hvad der skal være grøn og rød... Det her giver ingen mening for mig:
"Først led af <ul> skal altid være grøn, men <li> med tilhørende <ul> skal den tilhørende <ul> blive grøn. De resterende <ul> i diven skal skifte til rød."

<script type="text/javascript">8
  function changeColor(elm) {
    elm.getElementsByTagName('ul')[0].style.background = 'green';
  }
</script>

<div id="myTest">
  <ul> <!-- Denne <ul> og de tilhørende <li> skal altid være grønne -->
    <li onclick="changeColor(this);">
      Test a
      <ul>
        <li>
          Test a.1
      </li>
      <li onclick="changeColor(this);">
        Test a.2
        <ul> <!-- Denne <ul> og de tilhørende <li> skal skifte grøn når der klikkes på ovenstående <li> -->
          <li>
            Test a.2.1
          </li>
        </ul>
      </li>
      <li>
        Test a.3
      </li>
    </ul>
    </li>
    <li>
      Test b
    </li>
    <li onclick="changeColor(this);">
      Test c
      <ul> <!-- Denne <ul> og de tilhørende <li> skal skifte grøn når der klikkes på ovenstående <li> -->
        <li>
          Test c.1
        </li>
      </ul>
    </li>
    <li>
      Test d
    </li>
  </ul>
</div>

Hvis jeg f.eks. klikker på [Test a], skal [Test a.1], [Test a.2] og [Test a.3] skifte til grønne. Hvis jeg efterfølgende klikker på [Test c] skal [Test c.1] skifte til grøn og [Test a.1], [Test a.2] og [Test a.3] skal så skifte tilbage til rød.

Håber ovenstående uddyber mit ønske. :)

Ja, det giver mere mening. Jeg har ændret lidt i den ul struktur, så under punkterne først startes efter <li> er afsluttet og ikke indeni. Det gør det nemmere at arbejde med.

Eksempel:
<script>
function changeColor(e) {
    div = document.getElementById('myTest');
    ul_elements = div.getElementsByTagName('ul');

        for (var i=0; i<ul_elements.length; i++) {
        li_elements = ul_elements[i].getElementsByTagName('li');
            for (var j=0; j<li_elements.length; j++) {
            // gør altid li fra første ul element grøn og alle andre røde
            if (i == 0) {
                li_elements[j].className = 'green';
            } else {
                li_elements[j].className = 'red';
            }
           
            // gør det element vi klikkede på grønt
            if (li_elements[j] == e) {
                li_elements[j].className = 'green';
            }
            }
        }


    var nextElement = e.nextSibling; // hent næste element
    if (nextElement != null) {
        // vi skal være sikker på det er et element og ikke en blank
        while (nextElement != null && nextElement.nodeType !=1) {
            nextElement = nextElement.nextSibling;
        }
       
        if (nextElement != null) {
            next_li_elements = nextElement.getElementsByTagName('li'); // hent eventuelle li elementer
            if (next_li_elements.length > 0) { // er der nogen li elementer
                for (var i=0; i<next_li_elements.length; i++) { // lav dem grønne
                    next_li_elements[i].className = 'green';
                }
            }
        }
    }
}

</script>
<style>
li.red {
    background-color: red;
}
li.green {
    background-color: green;
}
</style>

<div id="myTest">
  <ul> <!-- Denne <ul> og de tilhørende <li> skal altid være grønne -->
    <li onclick="changeColor(this);">
      Test a
    </li>
      <ul>
        <li>
          Test a.1
      </li>
      <li onclick="changeColor(this);">
        Test a.2
      </li>
        <ul> <!-- Denne <ul> og de tilhørende <li> skal skifte grøn når der klikkes på ovenstående <li> -->
          <li>
            Test a.2.1
          </li>
        </ul>
      <li>
        Test a.3
      </li>
    </ul>
    <li>
      Test b
    </li>
    <li onclick="changeColor(this);">
      Test c
    </li>
      <ul> <!-- Denne <ul> og de tilhørende <li> skal skifte grøn når der klikkes på ovenstående <li> -->
        <li>
          Test c.1
        </li>
      </ul>
    <li onclick="changeColor(this);">
      Test d
    </li>
  </ul>
</div>

Nu gør den næsten som jeg ønsker.. :)

Min kode ser pt. sådan ud:
<html>
  <head>
    <script>
    function changeColor(e) {
      div = document.getElementById('myTest');
      ul_elements = div.getElementsByTagName('ul');

      for (var i=0; i<ul_elements.length; i++) {
        li_elements = ul_elements[i].getElementsByTagName('li');
        for (var j=0; j<li_elements.length; j++) {
          // gør altid li fra første ul element grøn og alle andre røde
          if (i == 0) {
            li_elements[j].className = 'green';
          } else {
            li_elements[j].className = 'red';
          }

          // gør det element vi klikkede på grønt
          if (li_elements[j] == e) {
            li_elements[j].className = 'green';
          }
        }
      }

      var nextElement = e.nextSibling; // hent næste element
      if (nextElement != null) {
        // vi skal være sikker på det er et element og ikke en blank
        while (nextElement != null && nextElement.nodeType !=1) {
          nextElement = nextElement.nextSibling;
        }

        if (nextElement != null) {
          next_li_elements = nextElement.getElementsByTagName('li'); // hent eventuelle li elementer
          if (next_li_elements.length > 0) { // er der nogen li elementer
            for (var i=0; i<next_li_elements.length; i++) { // lav dem grønne
              next_li_elements[i].className = 'green';
            }
          }
        }
      }
    }
    </script>
    <style>
    #myTest {
        width: 150px;
    }
    ul {
      list-style-type: none;
      padding-left: 15px;
      background: green;
    }
    li:hover,
    li.red:hover,
    li.green:hover {
        cursor: pointer;
        background: yellow;
    }
    li.red {
      background: red;
    }
    li.green {
      background: green;
    }
    </style>
  </head>

  <body>
    <div id="myTest">
      <ul>
        <li onclick="changeColor(this);">Test a</li>
        <ul>
          <li onclick="changeColor(this);">Test a.1</li>
          <li onclick="changeColor(this);">Test a.2</li>
          <ul>
            <li onclick="changeColor(this);">Test a.2.1</li>
          </ul>
          <li onclick="changeColor(this);">Test a.3</li>
        </ul>
        <li onclick="changeColor(this);">Test b</li>
        <li onclick="changeColor(this);">Test c</li>
        <ul>
          <li onclick="changeColor(this);">Test c.1</li>
        </ul>
        <li onclick="changeColor(this);">Test d</li>
      </ul>
    </div>
  </body>
</html>

[Test a], [Test b], [Test c] & [Test d] skal altid være grønne.

Når jeg klikker på [Test a] skal [Test a.1], [Test a.2] & [Test a.3] blive grønne, mens de resterende skal skifte/forblive røde.

Uanset hvilken af [Test a.1], [Test a.2] & [Test a.3] jeg klikker på skal de alle forblive grønne.

Når jeg klikker på [Test a.2] skal [Test a.2.1] skifte til grøn og de resterende, med undtagelse af [Test a.1] & [Test a.3] skal forblive røde.

Når jeg klikker på [Test b] skal alle, med undtagelse af [Test a], [Test c] & [Test d] skifte/forblive røde.

Når jeg klikker på [Test c] skal [Test c.1] blive grønne, mens de resterende skal skifte/forblive røde.

Når jeg klikker på [Test d] skal alle, med undtagelse af [Test a], [Test b] & [Test c] skifte/forblive røde.

Og det meste skal så laves om igen...
Du må selv lige komme lidt på banen med noget kode, jeg har ikke tid til at lave det hele for dig igen.

Det jeg sidder og forsøger mig med virker ikke.

Denne funktion virker tildels

function changeColor(e) {
  myDiv = document.getElementById('myMenu');
  myUls = myDiv.getElementsByTagName('ul');

  for(var i = 0; i < myUls.length; i++) {
    if(i == 0) {
      myUls[i].className = 'green';
    } else {
      myUls[i].className = 'red';
    }
  }
 
  var nextElement = e.nextSibling;
 
  if (nextElement != null) {
    while (nextElement != null && nextElement.nodeType !=1) {
      nextElement = nextElement.nextSibling;
    }
  }

  if (nextElement.nodeName == "UL") {
    nextElement.className = "green";
  }
}

Jeg har så forsøgt mig med brugen af parentNode i bunden af funktionen.

if (nextElement.parentNode.nodeName = "UL") {
  nextElement.parentNode.className = "green";
}

Ovenstående virker desværre ikke ved alle li-elementer. Hvis man f.eks. klikker på [Test a.2.1] returneres der ingen parentNode.

Glimrende :)

Jeg har lavet den færdig for dig, der er et par krumspring i koden, da internet explorer (som sædvanligt) ikke mener de skal overholde standarderne. Udover det har jeg kommenteret hvad jeg mente var nødvendigt, du kan bare spørge hvis der er noget.

<html>
  <head>
    <script>
    var t = null;
    function changeColor(e) {
      t = null;
      div = document.getElementById('myTest');
      ul_elements = div.getElementsByTagName('ul');

      // sæt indledende farver på LI
      for (var i=0; i<ul_elements.length; i++) {
        li_elements = ul_elements[i].getElementsByTagName('li');
        for (var j=0; j<li_elements.length; j++) {
          // gør altid li fra første ul element grøn og alle andre røde
          if (i == 0) {
            li_elements[j].className = 'green';
          } else {
            li_elements[j].className = 'red';
          }

        }
      }

    // Gør valgt element + siblings/parents af klikkede element grønne
    e_parent = e.parentNode;
    while(e_parent.nodeName == 'UL') {
        li_elements = e_parent.getElementsByTagName('li');
        for (var j=0; j<li_elements.length; j++) {
            // kun første niveau af UL skal være grønt, ikke underliggende niveauer
            if (li_elements[j].parentNode == e_parent) {
                li_elements[j].className = 'green';
            }
        }
        e_parent = e_parent.parentNode;
    }

      // gør næste UL element grønt, hvis der er et
      var nextElement = e.nextSibling; // hent næste element
      if (nextElement != null) {
        // vi skal være sikker på det er et element og ikke et linjeskift eller lign.
        while (nextElement != null && nextElement.nodeType !=1) {
          nextElement = nextElement.nextSibling;
        }

    // hack så internet explorer fatter det
    if (e.sourceIndex != undefined) {
        ie_element = document.all[e.sourceIndex+1];
        if (ie_element.nodeName == 'UL') {
            nextElement = ie_element;
        }
    }
    if (nextElement != null) {
            if (nextElement.nodeName == 'UL') { // er næste element en UL?
              next_li_elements = nextElement.getElementsByTagName('li'); // hent eventuelle li elementer
   
              if (next_li_elements.length > 0) { // er der nogen li elementer
                for (var i=0; i<next_li_elements.length; i++) { // lav dem grønne
            if (next_li_elements[i].parentNode == nextElement) {
                          next_li_elements[i].className = 'green';
            }
                }
              }
            }
    }
      }
    }

// Internet explorer hack, så den ikke kører eventet for alle niveauer samtidigt når man klikker
function loadChange(e) {
    if (t == null) {
        t = setTimeout(function() {changeColor(e)}, 10);
    }
}

    </script>
    <style>
    #myTest {
        width: 250px;
    }
    ul {
      list-style-type: none;
      padding-left: 15px;
      background: ;
    }
    li:hover,
    li.red:hover,
    li.green:hover {
        cursor: pointer;
        background: yellow;
    }
    li.red {
      background: red;
    }
    li.green {
      background: green;
    }
    </style>
  </head>

  <body>
    <div id="myTest">
      <ul>
        <li onclick="loadChange(this);">Test a</li>
        <ul>
          <li onclick="loadChange(this);">Test a.1</li>
          <li onclick="loadChange(this);">Test a.2</li>
          <ul>
            <li onclick="loadChange(this);">Test a.2.1</li>
          </ul>
          <li onclick="loadChange(this);">Test a.3</li>
        </ul>
        <li onclick="loadChange(this);">Test b</li>
        <li onclick="loadChange(this);">Test c</li>
        <ul>
          <li onclick="loadChange(this);">Test c.1</li>
        </ul>
        <li onclick="loadChange(this);">Test d</li>
      </ul>
    </div>
  </body>
</html>

Har forsøgt at rette koden lidt til. Den tilrettet kode virker perfekt i IE8, FF, Safari og Chrome, men desværre ikke i IE7 :(

Kan du lede mig på rette spor i forhold til hvad jeg gør forkert?

function changeColor(e) {
  var myUls = document.getElementById('myMenu').getElementsByTagName('ul');
  var parentUl = e.parentNode;
  var nextUl = e.nextSibling;

  // skjul alle ul-elementer i myMenu div-elementet
  for(var i = 0; i < myUls.length; i++) {
    myUls[i].className = 'red';
  }

  // viser alle de ul-elementer der omkredser li-elementet, der blev trykket på
  while(parentUl.nodeName == 'UL') {
    parentUl.className = 'green';
    parentUl = parentUl.parentNode;
  }

  // sikrer at det næste element er et element og ikke en blank
  if (nextUl != null) {
    while (nextUl != null && nextUl.nodeType !=1) {
      nextUl = nextUl.nextSibling;
    }
  }

  // hvis næste element er af typen UL vises dette
  if (nextUl.nodeName == "UL") {
    nextUl.className = "green";
  }
}

Ahh kan nu se, at du har smidt en løsning. :) Men for min egen tilfredsheds skyld, kan du så hjælpe med ovenstående, så skal du få dine velfortjente 200 points.

Øh? Du mener, at det jeg har lavet virker fint, men du vil gerne have jeg også skal ændre det du har lavet, så det også virker?

Du kan jo se hvordan jeg har gjort det, det må efterhånden være rigelig til at svare på dit første spørgsmål...

Jeg har tilrettet koden for at lærer mest muligt selv, så nej jeg ønsker ikke, at du skal ændre det jeg har lavet så det virker, men håbede, at du ville lede mig på rette spor, så jeg selv kunne få det til at virke.

Men som du skriver, har du svaret på spørgsmålet.

Tak for hjælpen og tak for din tålmodighed.

Fair nok :)
Jeg kan godt lige skrive de par ting jeg rendte ind i med internet explorer (koden fremgår af kommentarene i koden).

Når jeg klikkede på et nested element i UL listen, aktiverede IE først det 'rigtige' onclick. Derefter onclick for den parent, og herefter igen for den parent osv.

Det omgik jeg ved at lave en setTimeout på onclick i stedet. Så den kun kører det første onclick (derfor jeg sætter t=null i selve funktionen. setTimeout gør, at den når at registrere alle onclick events (både det rigtige og alle de forkerte) inden funktionen køres. Når funktionen kører sætter jeg t=null, og der kan derved laves en ny onclick næste gang man klikker. Så kort sagt, slår den fra efter først event er registreret, og slår til igen 10 millisekunder senere.

Den anden fejl var nextUl.nextSibling. IE mente, at nextSibling var et LI element, på trods af, at det i virkeligheden var et UL element (prøv at lav en alert(e.parentNode.nodeName) og se hvad den siger. IE har tilgengæld en metode der kunne hente sourceIndex. sourceIndex er det index nummer elementerne har (fra 0-xxx). Firefox f.eks. siger at sourceIndex er undefined. Så ved det hack tjekker den om sourceIndex eksistererer, hvis det gør, henter den sourceIndex fra det element der blev klikket på og lægger 1 til. Det betyder så, at vi får det næste element (det samme som nextSibling burde). Så den fejl omgås på den måde.


Den sidste ting er:
li_elements = e_parent.getElementsByTagName('li');

Her vælger IE alle LI tags (også dem der ligger i de underliggende UL elementer). For at undgå det tjekkede jeg, at de LI'er der skulle være grønne rent faktisk var en del af samme parent element som den LI der blev klikket på.
Håndteret sådan her:
e_parent = e.parentNode;
if (li_elements[j].parentNode == e_parent) {
// lav grøn
}


Det blev en lang smøre, håber du kan få lidt ud af det :)

Jeg fandt en lille fejl i din kode. Når man klikker på [Test a.2.1] i IE7 farves parent røde. Den har jeg rettet og i forhold til mit behov virker nedenstående. Dog opstår der en script fejl, hvis det li-element man klikker på, er det sidste. Det sker når man klikker på [Test a.2.1], [Test a.3], [Test c.1] og [Test d]. Fejlen opstår ved brugen af nextSibling, men ved ikke hvordan jeg rette det så fejlen ikke opstår.

Men som sagt virker koden efter hensigten nu :)

<html>
  <head>
    <script>
      var myTime = null;

      function changeStatus(e) {
        myTime = null;
        var myDiv = document.getElementById('myTest');
        var myUls = myDiv.getElementsByTagName('ul');       

        // farver alle ul-elementer røde
        for(var i = 0; i < myUls.length; i++) {
          myUls[i].style.background = 'red';
        }

        // farver alle parent ul-elementer grønne
        var myParentUl = e.parentNode;
        while(myParentUl.nodeName != 'DIV') {
          if(myParentUl.nodeName == 'UL') {
            myParentUl.style.background = 'green';
          }
          myParentUl = myParentUl.parentNode;
        }

        // hvis næste element er af typen ul, farves den grønt
        var myNextSibling = e.nextSibling;
        if (myNextSibling != null) {
          // sikrer at myNextSibling er et element og ikke et linjeskift eller lignende.
          while (myNextSibling != null && myNextSibling.nodeType !=1) {
            myNextSibling = myNextSibling.nextSibling;
          }

          // vi skal lige have IE med også
          if (e.sourceIndex != undefined) {
            ie_element = document.all[e.sourceIndex + 1];
            if (ie_element.nodeName == 'UL') {
                myNextSibling = ie_element;
            }
          }
        }

        if(myNextSibling.nodeName != null) {
          myNextSibling.style.background = 'green';
        }       
      }

      function loadChange(e) {
        if(myTime == null) {
          myTime = setTimeout(function() {changeStatus(e)}, 10);
        }
      }
    </script>

    <style type="text/css">
      #myMenu {
        width: 300px;
      }
      #myMenu ul {
        list-style-type: none;
      }
    </style>
  </head>

  <body>
    <div id="myMenu">
      <ul style="background: green;">
        <li onclick="loadChange(this);">Test a</li>
        <ul style="background: red;">
          <li onclick="loadChange(this);">Test a.1</li>
          <li onclick="loadChange(this);">Test a.2</li>
          <ul style="background: red;">
            <li onclick="loadChange(this);">Test a.2.1</li>
          </ul>
          <li onclick="loadChange(this);">Test a.3</li>
        </ul>
        <li onclick="loadChange(this);">Test b</li>
        <li onclick="loadChange(this);">Test c</li>
        <ul style="background: red;">
          <li onclick="loadChange(this);">Test c.1</li>
        </ul>
        <li onclick="loadChange(this);">Test d</li>
      </ul>
    </div>
  </body>
</html>

Fik fejlen rettet, her er koden i sin fulde udstrækning.

<html>
  <head>
    <script>
      var myTime = null;

      function changeStatus(e) {
        myTime = null;
        var myDiv = document.getElementById('myMenu');
        var myUls = myDiv.getElementsByTagName('ul');       

        // farver alle ul-elementer røde
        for(var i = 0; i < myUls.length; i++) {
          myUls[i].style.background = 'red';
        }

        // farver alle parent ul-elementer grønne
        var myParentUl = e.parentNode;
        while(myParentUl.nodeName != 'DIV') {
          if(myParentUl.nodeName == 'UL') {
            myParentUl.style.display = 'block';
          }
          myParentUl = myParentUl.parentNode;
        }
       
        // hvis næste element er af typen ul, farves den grønt
        var myNextSibling = e.nextSibling;
        if (myNextSibling != null) {
          // sikrer at myNextSibling er et element og ikke et linjeskift eller lignende.
          while (myNextSibling != null && myNextSibling.nodeType !=1) {
            myNextSibling = myNextSibling.nextSibling;
          }

          myNextSibling.style.background = 'green';
        }
        // vi skal lige have IE med
        if (e.sourceIndex != undefined) {
          ie_element = document.all[e.sourceIndex + 1];
          if (ie_element.nodeName == 'UL') {
            //myNextSibling = ie_element;
            ie_element.style.background = 'green';
          }
        }
      }

      // for IE's skyld
      function loadChange(e) {
        if(myTime == null) {
          myTime = setTimeout(function() {changeStatus(e)}, 10);
        }
      }
    </script>

    <style type="text/css">
      #myMenu {
        width: 300px;
      }
      #myMenu ul {
        list-style-type: none;
      }
    </style>
  </head>

  <body>
    <div id="myMenu">
      <ul style="background: green;">
        <li onclick="loadChange(this);">Test a</li>
        <ul style="background: red;">
          <li onclick="loadChange(this);">Test a.1</li>
          <li onclick="loadChange(this);">Test a.2</li>
          <ul style="background: red;">
            <li onclick="loadChange(this);">Test a.2.1</li>
            <ul style="background: red;">
              <li onclick="loadChange(this);">Test a.2.1.1</li>
            </ul>
          </ul>
          <li onclick="loadChange(this);">Test a.3</li>
        </ul>
        <li onclick="loadChange(this);">Test b</li>
        <li onclick="loadChange(this);">Test c</li>
        <ul style="background: red;">
          <li onclick="loadChange(this);">Test c.1</li>
          <ul>
            <li onclick="loadChange(this);">Test c.1.1</li>
            <li onclick="loadChange(this);">Test c.1.2</li>
            <li onclick="loadChange(this);">Test c.1.1</li>
          </ul>
        </ul>
        <li onclick="loadChange(this);">Test d</li>
      </ul>
    </div>
  </body>
</html>

Fantastisk :)

Held og lykke med det.