javascript - querySelector 在没有 jQuery 的情况下选择最近的祖先

Question

<style type="text/css">
.card{
    background:green;
}
</style>
<div class="card">
    inside first
    <div class="card" id="tryingtoselectthis">
        inside second
        <div class="card" id="myselector">
            inside third
        </div>
    </div>
</div>

<script type="text/javascript">
    console.log(document.querySelector("#myselector").closest(".card"));
</script>

我正在尝试使用仅使用该类#tryingtoselectthis的选择器进行选择。.myselector请注意，同一个班级可能有无限数量的孩子，我要做的就是选择上面同一个班级的父母。

parentNode不起作用。并且，必须使用其类名来选择节点。

没有 jQuery

标签： javascriptjquery

Answer 1

您快到了，但如果您不希望最初选择的元素成为可能的结果，则必须调用closest其父元素，而不是所选元素。

console.log(document.querySelector("#myselector").parentElement.closest(".card").id);

.card {
  background: green;
}

<div class="card">
  inside first
  <div class="card" id="tryingtoselectthis">
    inside second
    <div class="card" id="myselector">
      inside third
    </div>
  </div>
</div>

请注意，像 IE 这样的古老浏览器将需要 polyfill。

元素.closest()