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

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
}

实际上我认为你不需要将它转换为带有Array.from的数组，如果你正在做for..of.. ，但如果你正在做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>