如何在java脚本中定位原始元素的前一个元素？

如何解决如何在java脚本中定位原始元素的前一个元素？

您好，我是 javascript 新手，但我尽我所能编写了一个 javascript。它工作正常，但当我输入 <div class="flex"></div> 时它停止工作。因为按钮标签是针对上一个元素的。 我的 HTML

  <div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
    <div class="block">
     <div class="latestatus">
      <p>Life is good when you have books</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Google is a open source library by Larry Page and Sergey Brin!</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
     <div class="block">
     <div class="latestatus">
      <p>Cats are better than dogs.</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     <div class="latestatus">
      <p>Ferrets are better than rats</p>
      <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
     </div>
     </div>
   </div>
  </div>

我的 JavaScript

buttons.forEach((copystatus) => {
  copystatus.addEventListener('click',(e) => {
    const copylatest = e.target.previousElementSibling.innerText;
    const copyText = document.createElement('textarea');
    copyText.value = copylatest;
    document.body.appendChild(copyText);
    copyText.select();
    document.execCommand('copy');
    document.body.removeChild(copyText);
    copyalert.style.visibility="visible"
    e.target.parentElement.appendChild(copyalert);
    setTimeout(function() {copyalert.style.visibility ="hidden"},700);
    
  })
})

请帮助我并提前致谢。

解决方法

可以制作两个变量，一个是元素的前一个元素，另一个是前一个元素的前一个元素

var x = document.getElementById("item2").previousSibling;
var y= x.previousSibling;

,

您可以只链接 previousElementSibling 属性，因为它会返回一个 HTMLElement。但是，最好通过另一个选择器（例如类）来定位所需的元素，这样您的代码在下次向 html 中添加元素时不会中断。

document.querySelector('Button').addEventListener('click',(e) => {
  console.log(e.target.previousElementSibling.previousElementSibling.innerText);
});

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<button>Click</button>

,

假设要复制div.latestates > p内的文字，可以在p内查询Element.closest：

document.addEventListener("click",bttnClick);

function bttnClick(evt) {
  console.clear();
  console.log(evt.target.closest(".latestatus").querySelector("p").innerText);
}

<div class="mainStatus">
  <h2 class="statusHeading">Latest English Status</h2>
  <div class="allStatus">
    <div class="block">
      <div class="latestatus">
        <p>Life is good when you have books</p>
        <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
      </div>
      <div class="latestatus">
        <p>Google is a open source library by Larry Page and Sergey Brin!</p>
        <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
      </div>
    </div>
    <div class="block">
      <div class="latestatus">
        <p>Cats are better than dogs.</p>
        <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
      </div>
      <div class="latestatus">
        <p>Ferrets are better than rats</p>
        <div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
      </div>
    </div>
  </div>
</div>