定位 JavaScript 中最接近的类

我刚刚学习 javascript 并遇到了问题。
我试图定位最接近的类并更改值，但我只是不断收到 Cannot read property 'innerText' of null at HTMLUListElement。
这是不可能的还是我应该研究其他方法？
任何帮助或指导表示赞赏。

<div id="someId">
<h2>Test</h2>
<ul>
    <li>
        <p class="amount">5</p>
        <span class="name">My Name</span>
        <button class="plus">Plus</button>
    </li>
    <li>
        <p class="amount">10</p>
        <span class="name">My Name 2</span>
        <button class="plus">Plus</button>
    </li>
    <li>
        <p class="amount">15</p>
        <span class="name">My Name 3</span>
        <button class="plus">Plus</button>
    </li>
</ul>

const someList = document.querySelector('#someId ul');

someList.addEventListener('click', function(e) {
if (e.target.className === 'plus') {
    let newValue = e.target.closest('.amount');
    newValue.innerText += "5";
}
});

我已经将 .amount 更改为很多不同的东西，p 和 li > p 等，但没有运气。

.closest()沿着 dom/xpath 向上查看祖先。你的p.amount是兄弟姐妹，而不是祖先，因此您不会返回任何内容.closest()

没有单一核心 js 方法可以满足您的要求。 jQuery 提供了一个函数叫做。兄弟姐妹（） https://api.jquery.com/siblings/如果您想使用它，这最接近您想要做的事情。但对于纯 javascript，要点是沿着 dom/xpath 树向上，然后返回。

您可以采用不同的方法来做到这一点，具体取决于您想要成为“锚点”的选择器。 @doodlemeister 的答案是一种方法，但在我看来，它并不是很好，因为它可能不像您希望的那样灵活。它假设向上到第一个父级，然后返回到第一个子级。 IOW 它期望您的 html 结构与您现在的结构完全相同。

更灵活的方式是这样的：

const someList = document.querySelector('#someId ul');
someList.addEventListener('click', function(e) {
    if (e.target.className === 'plus') {
        let newValue = e.target.closest('li').querySelector('.amount');
        newValue.innerText = +newValue.innerText + 5;
    }
});

然后您可以调整.closest()如果需要的话，您可以使用选择器querySelector()从那里返回 dom/xpath 并以您最初想要的类为目标。