jQuery – Unbekanntes Eltern Element eines Kindelementes finden

Hallo,

da melde ich mich mal wieder.
Folgende Situation:
Wir haben eine tiefverschachtelte HTML Struktur.
Wir kennen die ID eines Elementes innerhalb der Struktur.

Frage: Wie bekommen wir die ID des gewünschten Elternelementes?

Wir legen einmal folgende HTML Struktur zugrunde:

<ul name="parent_menu" id="1_parent">
  <li>
      Listen Element Eltern Liste
      <span>Ein Text</span>
      <div>Dieses div umschliesst zusätzlich die Kindliste
         <ul name='child_menu" id="1_child">
              <li>Listen Element Kind Liste</li>
         </ul>
       </div>
  </li>
</ul>

Wir haben allen ul-Elementen einen Namen gegeben.
Dies dient uns als Selektor für unser jQuery Statement.

Folgender kleiner Javascript Code hilft uns bei der Lösung des Problemes:

//Die ID des aktuell aktiven Elemented
var activeMenu = '1_child';

//eine temporäre Variable
var parentID = "";

//temporäre Variable
var found = false;

//prüfen ob es sich im ein Kind Element handelt
if($('#'+activeMenu).attr("name")=="child_menu"){

   //nun duchlaufen wir mit Hilfe von jQuery alle
   //"parent_menu" ul Elemente
   $('ul:[name="parent_menu"]').each(
      function (index){

        //hier speichern wir die ID des aktuellen Elementes in einer
        //vorher definierten Variable
        parentID = $(this).attr("id");

        //mit Hilfe von jQuery find suchen wir nun innerhalb des aktuellen
        //"parent_menu" ul Elementes alle untergeordneten 'ul' - Elemente
        $(this).find('ul').each(function(){

           //Wenn wir nun unser aktives Element (activeMenu) gefunden haben
           //können wir den jQuery each Loop verlassen (return false)
           if($(this).attr("id")==activeMenu){
                found = true;
                return false;
           }
        });
       if(found){
           return false;
       } 
     }
   );
}

Ich hoffe Ihr könnt mit dem kleinen Schnipsel was anfagen.
Viel Spass beim Coden

Euer Sven

Dieser Beitrag wurde unter Javascript, jquery abgelegt und mit , , , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.