JavaScript .closest返回null

Question

我有以下简单的布局，我无法更改。我正在尝试使用JavaScript来获取最接近所按按钮的extra元素

在另一个问题的帮助下，我能够让preventDefault部分正常工作，但现在我正在与closest作斗争

<div class="buttons">
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">64736</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">5446</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">78667</div>
    </div>
</div>

document.querySelector('.myButton').addEventListener('click', myFunction);

function myFunction() {

    event.preventDefault();

    close = this.closest(".extra"); 

    console.log(close)

}

但当我按下按钮时，这会给我null，我哪里错了？

Answer 1

可以使用closest和querySelector的组合：

​

document.querySelectorAll('.myButton').forEach(function(button) {
  button.addEventListener('click', myFunction);
});

function myFunction(evt) {
  evt.preventDefault();

  var closest = evt.currentTarget.closest(".button").querySelector('.extra');

  console.log(closest)

}

<div class="buttons">
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">64736</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">5446</div>
  </div>
  <div class="button">
    <button class="myButton">Click Me</button>
    <div class="extra">78667</div>
  </div>
</div>

​

更多信息：

• https://developer.mozilla.org/en-US/docs/Web/API/Element/closest https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

.closest遍历dom，不查看兄弟元素或子元素。在@MaartenDev的回答中，他使用.closest提升了一个级别，并针对按钮的父div。然后，他链接queryselector以返回到子类中，并使用.extra类进行选择。另一种解决方案是使用.nextElementSibling，这样您就不必升级和后退。只有当您的html元素是直接兄弟元素，并且您尝试以此为目标的项目跟在您调用nextElementSibling的元素之后时，这才会起作用。

这里有一个这样的例子。

​

document.querySelectorAll('.myButton').forEach(function(button){
  button.addEventListener('click',myFunction);
})
function myFunction() {
  
  event.preventDefault();
  
  var closest = this.nextElementSibling;
  
  console.log(closest);

}

<div class="buttons">
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">64736</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">5446</div>
    </div>
    <div class="button">
        <button class="myButton">Click Me</button>
        <div class="extra">78667</div>
    </div>
</div>

​