如何 运行 a .click on elems parent sibling selector？

Question

以下是我最近的尝试：

var aSl = document.querySelector('input[id^="blahblah"]');
aSl.closest("span.k-icon.k-i-expand").click();

它返回：

myjs.js:181 未捕获的类型错误：无法读取 null属性'closest'

我也尝试用 parent.sibling 代替上面的 .closest - 返回 '...parent is not a function' 错误。

以下是我的加价：

<span class="k-icon k-i-expand">::before</span> <--- this is what I'm trying to run .click() on
<span class="k-checkbox-wrapper">
   <input type="checkbox" tabindex="-1" id="blahblah-blah" class="k-checkbox">
<span>...</span>
</span>

更新，我刚刚也试过了；每条评论无济于事：

var el = document.querySelector('input[id^="blahblah"]');
el.parentNode.parentNode.click();

Answer 1

正如评论中所说，您似乎将 jquery 的 API 与 DOM API 混合使用，坚持使用其中之一，您会得到结果（假设 blahblah 的选择器实际上找到了一个对象）

Answer 2

closest() 方法遍历元素和它的父元素（朝向文档根），直到找到与提供的选择器字符串匹配的节点。将 return 本身或匹配的祖先。如果不存在这样的元素，则它 return 为空。

您想要得到的实际上是 aS1 的父级的 同级，因此输出为空。

如果代码是这样的话，你会得到想要的元素。

<span class="k-icon k-i-collapse">
   ::before
   <span class="k-checkbox-wrapper">
        <input type="checkbox" tabindex="-1" id="blahblah-blah" class="k-checkbox">
        <span>...</span>
   </span>
</span> 

另请注意，不存在名称为 class 'k-i-collapse' 的父元素。