Wie kann ich einen Ausdruck erstellen, der bewertet, ob die Nachkommen eines Elternteils aktiv sind oder nicht?

Question

Stellen Sie sich vor ich ein div mit ein paar Nachkommen/Kinder als solche haben:

<div id="parent" tabindex="0"> 
    <h1 tabindex="0"> my Header </h1> 
    <p tabindex="0"> some text </p> 
    <ul tabindex="0"> 
    <li tabindex="0"> item 1 </li> 
    <li tabindex="0"> item 2 </li> 
    <li tabindex="0"> item 3 </li> 
    </ul> 
</div> 

Wie kann ich einen Ausdruck erstellen, ob ein Kind der ‚Eltern‘ überprüft div aktiv ist/Fokus hat? Ich möchte eine Aktion durchführen (zB: Konsolenprotokoll), wenn die Aussage wahr ist.

Ich stelle mir würde es gehen so etwas wie:

if(document.activeelement === <descendant of 'parent' div>) { 
    console.log("descendant is active"); 
    } 

EDIT: Aus Gründen der Klarheit: Die Auswertung als 'if' Anweisung auftreten sollte. Der Ausdruck sollte so übersetzen:

Wenn mein aktives Element ein Elternteil mit einer ID von 'Eltern' hat, dann tu etwas.

Answer 1

Kennen Sie die ID der Eltern und die Klassennamen der Kinder? oder werden diese basierend auf dem, was geklickt wird, dynamisch sein? Wenn Sie den Selektor des übergeordneten Elements und der untergeordneten Elemente kennen, wird im Folgenden ein Element li erfasst, das ein untergeordnetes Element oder unmittelbar untergeordnetes Element des Elements #parent ist, das aktiv ist. wenn es leer ist, dann keines dieser Registerkarten

$(#parent li:focus) 

mit diesem jQuery-Selektor fokussiert sind, fordern wir für jede li Kind des #parent Element, das aktiv ist (:focus).

Answer 2

können Sie click verwenden, keydown, keyuyp Ereignisse an document, $("#parent [tabindex]") Selektor, .is(), :focus

function checkFocus() { 
 
    console.log("descendant is active:" 
 
       , $("#parent [tabindex]").is(":focus") 
 
       , this.activeElement.tagName) 
 
} 
 

 
$(document).on("click keydown keyup", checkFocus)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent" tabindex="0"> 
 
    <h1 tabindex="0"> my Header </h1> 
 
    <p tabindex="0">some text</p> 
 
    <ul tabindex="0"> 
 
    <li tabindex="0">item 1</li> 
 
    <li tabindex="0">item 2</li> 
 
    <li tabindex="0">item 3</li> 
 
    </ul> 
 
</div>