如何创建一个表达式来评估父 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"); 
  }

编辑：为了清楚起见：评估应作为"if"语句进行。表达式应翻译如下：

如果我的活动元素有一个 ID 为"parent"的父元素，那么做一些事情。

Answer 1

你知道

父项的ID和子项的类名吗？ 还是这些会根据单击的内容动态的？ 如果您知道父元素和子元素的选择器，则以下内容将获取一个li元素，该元素是处于活动状态的#parent元素的深层或直接子元素。 如果为空， 那么这些选项卡都没有聚焦

$(#parent li:focus)

使用此 jQuery 选择器，我们请求处于活动状态的 #parent 元素的任何li子元素 （ :focus ）。

Answer 2

您可以使用附加到document、$("#parent [tabindex]")选择器、.is()、:focus附加到click、keydown、keyuyp

事件

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>