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

Answer 1

你几乎就在那里，但是如果你不想让你最初选择的元素成为可能的结果，那么你必须在其父母身上调用closest，而不是在选定的元素。

＆＃13;

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

＆＃13;

.card {
  background: green;
}

＆＃13;

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

＆＃13;

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

Element.closest()

Answer 2

使用以下内容将遍历每个父元素，直到找到匹配元素或直到它到达不是HTMLElement实例的文档

＆＃13;

function findParent(element, selector) {
  let result = null;
  while(!result && (element = element.parentElement) instanceof HTMLElement) {
    if(element.matches(selector))
      result = element;
  }
  return result;
}
console.log(findParent(document.getElementById('myselector'), '#tryingtoselectthis'))

＆＃13;

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

＆＃13;

Answer 3

parentNode无效。

当然有效。

尝试document.querySelector("#myselector").parentNode.closest(".card")

＆＃13;

var id = document.querySelector("#myselector").parentNode.closest(".card").id;
console.log(id);

＆＃13;

.card{
    background:green;
}

＆＃13;

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

＆＃13;

Answer 4

你可以试试这个。如果您的父ID已修复。

var el=document.querySelector('#myselector'); 
var closestelement = el.closest('#tryingtoselectthis.card');

console.log(closestelement)

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

您可以在MDN网站

中找到离Pollyfill最近的地方

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

4 个答案: