javascript - 如何使用 JavaScript 检查一个元素是否嵌套在另一个元素中？

Question

我有一个如下所示的 HTML 结构。这种结构是一个嵌套列表。

<ul id="u0">
    <li id="l1">
        <a id="a1"></a>
        <ul id="u1">
            <li id="l2">
                <a id="a2"></a>
            </li>
            <li id="l3">
                <a id="a3"></a>
                <ul id="u2">
                    <li id="l4">
                        <a id="a4"></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

并寻找一个 JS 函数来识别一个元素是否在特定的分支中。例如，假设函数是 function(id1,id2)

function('a4','l4') return true (a4 is a child of l4)
function ('a4','l2') returns false (a4 is not a child of l2)
function('a4','l1') returns true (a4 is a child of l1)

我所做的是使用 children() 并迭代结果，但这没有用。我觉得答案很短，我把一个简单的问题复杂化了。

Answer 1

您可以使用querySelector 查询父项、子项并将结果转换为 bool 值:

const contains = (childId, parentId) => {
  return !!document.querySelector(`#${parentId}`).querySelector(`#${childId}`);
}

console.log(contains('a4', 'l4')) // return true (a4 is a child of l4)
console.log(contains('a4', 'l2')) // returns false (a4 is not a child of l2)
console.log(contains('a4', 'l1')) // returns true (a4 is a child of l1)

<ul id="u0">
  <li id="l1">
    <a id="a1"></a>
    <ul id="u1">
      <li id="l2">
        <a id="a2"></a>
      </li>
      <li id="l3">
        <a id="a3"></a>
        <ul id="u2">
          <li id="l4">
            <a id="a4"></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>