如何在javascript中定位前一个元素的前一个元素？答案

【问题标题】：How to target privious element's previous element in java script?如何在javascript中定位前一个元素的前一个元素？
【发布时间】：2021-04-14 03:41:05
【问题描述】：

嘿，我是 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);
    
  })
})

请帮助我并提前感谢。

【问题讨论】：

标签： javascript html scripting dynamic-html

【解决方案1】：

可以做两个变量，一个是元素的前一个元素，一个是前一个元素的前一个元素

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

【讨论】：

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

【解决方案2】：

您可以只链接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>

【讨论】：

请使用我的常量和可验证并从下面的按钮中定位
。

【解决方案3】：

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

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>

【讨论】：