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

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 工作，并且只在被点击时应用于任何项目

希望有人能帮忙！

Answer 1

var arr = Array.from(document.getElementsByClassName('sub-menu-wrap'));
for (let el of arr) {
    var x = el.lastElementChild;
    /// do what you want to x here
}

实际上，如果您正在使用 for..of..，我认为您不需要使用 Array.from 将其转换为数组，但如果您正在使用 arr.forEach()，您会这样做

Answer 2

试试这样。获取 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>