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>

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

2 个答案: