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

Question

So what I need to do is grab the last element child for every item in an array.

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";
  }
}

I know that this works:

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

But instead of defining which item in the array I want it to use I need it to just dynamically grab every item in the array and get the .lastElementChild for them.

Just to add this I need this function to work as onclick and only get applied to any of the items when they are clicked on

Hope someone can help!

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
}

Actually I don't think you need to convert it to an array with Array.from if you're doing for..of.. , but you would if you're doing arr.forEach()

Answer 2

Try like this. get the array of the class sub-menu-wrap and loop it and hide/show your last child element

 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> 

If you want to hide the clicked elements last child

 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>