✔ Root-Element in Multi-Liste finden

Maniac

Maniac

Erfahrenes Mitglied
Moin,

Ich komm irgendwie nicht drauf wie ich zb in einer Navigationsliste mit mehreren Untermenüs beim Mousover der Submenüs das Root-Element "li" aus der ersten Ebene die Klasse ".active" zu setzen.

Als Beispiel:
HTML: 
<ul>
<li> root Ebene
   <ul>
      <li> 1. Subebene
         <ul>
              <li>2. Subebene</li>
        </ul>
      </li>
   </ul>
</li>
</ul>

Wie komm ich denn egal in welcher Ebene ich mich befinde auf das Root-Element?
 
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>root</title>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('root').addEventListener('click', function (evt) {
        var current = evt.srcElement;
        var root    = evt.srcElement;
        
        while(((current.nodeName === 'LI') && (current.parentElement.nodeName === 'UL')) || (current.nodeName === 'UL')) {
          root    = current;
          current = current.parentElement;
        }
        
        console.log(root);
      }, false);
    }, false);
  </script>
</head>
<body>
  <ul id="root">
    <li> root Ebene
      <ul>
        <li> 1. Subebene
          <ul>
            <li>2. Subebene</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>
 
Sieht gut aus, hätte vielleicht noch erwähnen sollen das ich jQuery verwende...
Aber ich versuchs jetzt mal so zu übernehmen und teste es.
 
Dann geht es viel leichter mittels parents():

HTML: 
<ul>
  <li data-msg="Hello World!"> root Ebene
     <ul>
        <li> 1. Subebene
           <ul>
                <li id="elem">2. Subebene</li>
          </ul>
        </li>
     </ul>
  </li>
</ul>

Javascript: 
alert( $("#elem").parents("li").last().data("msg") );
Das gibt hier "Hello World!" aus.
 
So in etwa hatte ich es auch schon versucht, mir fehlte allerdings "last()".
Ich habe es nun so gelöst:
HTML: 
<ul>
  <li> <a href="">Root-Link</a>
     <ul>
        <li> <a href="" class="test">1. Subebene</a>
           <ul>
                <li><a href="" class="test">2. Subeben</a></li>
          </ul>
        </li>
     </ul>
  </li>
</ul>
Javascript: 
$('.test').hover(
   function(){
      $(this).parents('li').last().find('a').first().addClass('active');
   },
   function(){
      $(this).parents('li').last().find('a').first().removeClass('active');
   }
);
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück