javascript - 如何使用 querySelector 而不是 jQuery 查找父级的子级？

Question

要求规定我不能使用 jQuery，并且我正在尝试不使用它来解决以下问题。

布局具有相同的多个输入，如下所示

<div class="item">
   <input type="text" />
   <input type="file" />
</div>
<div class="item">
   <input type="text" />
   <input type="file" />
</div>​​​​​​​​​​​​​​​​​​​​​

当单击文本框时，JavaScript 需要找到同级文件输入。

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

注意:我无法使用 Id，因为页面上有多个(许多)“项目”。

Answer 1

您可以使用 vanila 脚本事件处理程序和元素之间的下一个兄弟关系，例如

//get all the text input elements which are descendants of .item
var els = document.querySelectorAll('.item input[type="text"]');
for (var i = 0; i < els.length; i++) {
  //add click handler
  els[i].addEventListener('click', function() {
    //nextElementSibling is supported from IE9
    this.nextElementSibling.click()
    //or
    //this.parentNode.querySelector('input[type="file"]').click()
  })
}

<div class="item">
  <input type="text" />
  <input type="file" />
</div>
<div class="item">
  <input type="text" />
  <input type="file" />
</div>

• nextElementSibling