javascript - 如何获取数组中每个项目的最后一个元素子元素

Question

所以我需要做的是为数组中的每个项目获取最后一个元素子元素。

function myDropdown() {
  var x = document.getElementsByClassName('sub-menu-wrap')[0].lastElementChild
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

我知道这有效：

document.getElementsByClassName('sub-menu-wrap')[0].lastElementChild

但是，我不需要定义数组中的哪个项目，我希望它使用它来动态抓取数组中的每个项目并.lastElementChild为它们获取。

只是为了添加这个，我需要这个函数作为 onclick 工作，并且只在单击它们时应用于任何项目

希望有人能帮忙！

标签： javascriptarrayswordpressforeachmenu

Answer 1

像这样试试。获取类的数组sub-menu-wrap并循环它并隐藏/显示你的最后一个子元素

function myDropdown() {

  var array = Array.from(document.getElementsByClassName('sub-menu-wrap'));
for (let data of array) {
    var x = data.lastElementChild;
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
       x.style.display = "none";
    }
}

  
}

myDropdown()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sub-menu-wrap">
  <div>hi1</div>
  <div>hi2</div>
  <div>hi3</div>
</div>

<div class="sub-menu-wrap">
  <div>hi1</div>
  <div>hi2</div>
  <div style="display:none">hi3</div>
</div>

如果你想隐藏最后一个孩子点击的元素

function hideLast(e) {


    var x = e.lastElementChild;
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
       x.style.display = "none";
    }


  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sub-menu-wrap" onclick="hideLast(this)">
  <div>hi1</div>
  <div>hi2</div>
  <div>hi3</div>
</div>

<div class="sub-menu-wrap" onclick="hideLast(this)">
  <div>hi1</div>
  <div>hi2</div>
  <div style="display:none">hi3</div>
</div>