親divの子孫がアクティブであるかどうかを評価する式を作成するにはどうすればよいですか？

Question

は私のようないくつかの子孫/子供を持つdiv要素を持っている想像してみて：？

<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> 

は、どのように私は「親」のdivの子がアクティブであるかどうか/フォーカスを持ってチェックする式を作成することができますか私は、ステートメントがtrueと評価された場合、何らかのアクション（例：コンソールログ）を実行したいと思います。声明 'が' 評価がとして発生する必要があります

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

EDIT：明確にするために

私はそれを想像するような何かを行くのです。式は次のように変換する必要があります。

アクティブな要素のIDが 'parent'の場合、何かします。

Answer 1

あなたは親のIDと子供のクラス名を知っていますか？クリックされた内容に基づいて動的に表示されますか？親と子のセレクタが分かっている場合は、#parent要素の深い、または直下の子であるli要素を取得します。それが空である場合には、これらのタブのいずれも、このjQueryのセレクタを使用して

$(#parent li:focus) 

重視されていない、我々はアクティブです#parent要素（:focus）のいずれかのli子のために求めています。

Answer 2

あなたはどのような状況下ではdocumentに添付click、​​、keyuypイベント、$("#parent [tabindex]")セレクタ、.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>