如何从事件目标最接近（名称）中获取元素

Question

我不确定如何使用事件目标closest([name="..."])，据我所知closest() 应该在我更改输入字段中的值后获取元素以进行计算，但我得到的元素是null

function calculate(e) {
    if (e.target.name == 'qty') {
      var elemPrice = e.target.closest('[name="price"]') //***
      var elemAmount = e.target.closest('[name="amount"]') //***
      console.log(elemPrice)
      console.log(elemAmount)
      elemAmount.value = elemPrice.value * e.target.value
    }
}
document.addEventListener('DOMContentLoaded',function(){
    document.getElementsByName('qty').forEach(t => { t.addEventListener('change',calculate) })
})

<table>
      <tbody>
                <tr class="uk-hidden">
                    <td>1</td>
                    <td><input name="price"></td>
                    <td><input name="qty"></td>
                    <td><input name="amount"></td>
                </tr>
                <tr class="uk-hidden">
                    <td>2</td>
                    <td><input name="price"></td>
                    <td><input name="qty"></td>
                    <td><input name="amount"></td>
                </tr>
                <tr class="uk-hidden">
                    <td>3</td>
                    <td><input name="price"></td>
                    <td><input name="qty"></td>
                    <td><input name="amount"></td>
                </tr>
      </tbody>
</table>

我试过了

   ...
      var elemPrice = e.target.parentElement.previousElementSibling.lastElementChild  //***
      var elemAmount = e.target.parentElement.nextElementSibling.lastElementChild  //***
   ...

但我想像closest 那样做有没有办法做到这一点？

无论如何提前谢谢你

Answer 1

阅读文档总是一个好主意。如果我们查看https://developer.mozilla.org/en-US/docs/Web/API/Element/closest，它会说：

closest() 方法遍历Element 及其父项（朝向文档根目录），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回null。

所以它不会按照你的假设去做：它只检查从你的元素到文档根目录的路径。你想要的是找到最近的<tr>，然后在that元素里面找到name=price元素：

e.target.closest(`tr`).querySelector(`[name=price]`)