Question

我一直在尝试使用以下示例html和selector

检索最接近的元素

<html>
<head>
    <title></title>
</head>
<body>

    <div>
        <p data-message="hello">Hello, World</p>
        <ul>
            <li></li>
        </ul>
        <p>Try again</p>
    </div>
</body>
</html>

我想从 li 元素中使用数据消息属性检索最近的 p 元素。

以下代码返回null

var el = document.querySelector('li');
el.closest('p[data-message]');

Answer 1

最近才获取父元素，由于p不是li的父母，因此您需要获得最接近的div，然后执行querySelector像这样：

＆＃13;

let el = document.querySelector('li')
let p = el.closest('div').querySelector('p[data-message]')

console.log(p.textContent)

＆＃13;

<div>
  <p data-message="hello">Hello, World</p>
  <ul>
    <li></li>
  </ul>
  <p>Try again</p>
</div>

＆＃13;

如果您想要p[data-message]的直接子项，则可以将:scope>p[data-message]替换为div，否则querySelector将获取具有属性p的所有[data-message]个元素并且以某种方式（直接或间接）是div的孩子。

无法检索最接近的元素

1 个答案: