Как получить последний дочерний элемент для каждого элемента в массиве

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

Попробуй вот так.получить массив класса 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>

Answer 2

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()