Vanilla JS: выбрать все элементы с классом в родительском элементе на основе позиции курсора

Question

У меня есть несколько элементов с классом parent.У них всегда одни и те же дочерние элементы: child и несколько элементов child с классом detail.Я всегда хочу зачитать все элементы с классом detail в пределах ближайшего .parent .child, основываясь на моей текущей позиции курсора.

Используя document.querySelectorAll('.details');, я получаю все из них, что неправильно.Я пытался использовать closest(), find() и parent(), но не могу понять, как.Всегда получайте ошибку в консоли: "Uncaught TypeError: document.querySelectorAll(...).closest is not a function".

Рабочий процесс: Обычно, когда я нажимаю на один из входов с классом detail, а затем нажимаю button ниже,он должен показать мне все элементы с классом detail в пределах ближайшего .parent .child.Например, когда я нажимаю на первый input и нажимаю button, я должен получить 3 элемента detail в моем console.log().Используйте чистый JavaScript.

const btn = document.getElementById('select-detail');

btn.addEventListener('click', getDetails);

function getDetails() {
  // Wrong: selects all elements with detail class
  const detailsAll = document.querySelectorAll('.detail');
  
  // My failed attempt:
  const details = document.querySelectorAll('.detail').closest('.parent .child');
  
  /* Some other failed attempts */
  // const details = document.closest('.detail .child').find('.detail');
  // const details = document.querySelectorAll('.detail').parent('.parent .child');
  
  console.log('details', details);
}

.parent {
  border: 2px solid black;
  margin-bottom: 15px;
  padding: 5px;
}

.child {
  border: 2px solid lightcoral;
  padding: 5px;
}

.detail {
  border: 2px solid lightblue;
  padding: 5px;
}

#select-detail {
  font-size: 15px;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<button id="select-detail">Select all details of nearest parent to cursor position (open inspector to check)</button>

Answer 1

Слушайте событие focusout. Если элемент, вызвавший событие, был .detail, установите для этого элемента постоянную переменную. Затем в обработчике щелчков по кнопкам изучите, что находится в постоянной переменной, получите доступ к ее parentElement, а оттуда, children, чтобы получить всех братьев и сестер из последнего размытого ввода:

let lastFocused;
window.addEventListener('focusout', (e) => {
  const { target } = e;
  if (target.matches('.detail')) {
    lastFocused = target;
  }
});

const btn = document.getElementById('select-detail');

btn.addEventListener('click', getDetails);

function getDetails(e) {
  const theseSiblings = lastFocused.parentElement.children;
  console.log(theseSiblings);
}

.parent {
  border: 2px solid black;
  margin-bottom: 15px;
  padding: 5px;
}

.child {
  border: 2px solid lightcoral;
  padding: 5px;
}

.detail {
  border: 2px solid lightblue;
  padding: 5px;
}

#select-detail {
  font-size: 15px;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<button id="select-detail">Select all details of nearest parent to cursor position (open inspector to check)</button>

Answer 2

Вам нужно будет запомнить последний input, в котором вы были, поскольку нажатие кнопки убирает фокус с ввода.

let input = null;

document.addEventListener("focusin", ({target}) => {
  if (target.tagName === "INPUT") {
    input = target;
  }
});

btn.addEventListener('click', getDetails);

function getDetails() {
  if (!input) {
    console.log("No 'last input'");
    return;
  }
  const details = input.closest('.parent .child');

  console.log('details', details);
}

Live Пример:

const btn = document.getElementById('select-detail');

let input = null;

document.addEventListener("focusin", ({target}) => {
  if (target.tagName === "INPUT") {
    input = target;
  }
});

btn.addEventListener('click', getDetails);

function getDetails() {
  if (!input) {
    console.log("No 'last input'");
    return;
  }
  const details = input.closest('.parent .child');
  
  console.log('details', details);
}

.parent {
  border: 2px solid black;
  margin-bottom: 15px;
  padding: 5px;
}

.child {
  border: 2px solid lightcoral;
  padding: 5px;
}

.detail {
  border: 2px solid lightblue;
  padding: 5px;
}

#select-detail {
  font-size: 15px;
  padding: 20px;
}

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<div class="parent">
  <div class="child">
    <input class="detail" placeholder="click into input">
  </div>
</div>

<button id="select-detail">Select all details of nearest parent to cursor position (open inspector to check)</button>