javascript - 普通JS : Select all elements with class within parent based on cursor position

Question

我有几个带有 parent 类的元素。它们始终具有相同的子元素:child，并且在 child 内具有类 detail 的多个元素。我总是想根据我当前的光标位置读出最近的 .parent .child 中具有类 detail 的所有元素。

使用 document.querySelectorAll('.details'); 我得到了所有这些，这是错误的。我尝试使用 closest()、find() 和 parent()，但我不知道如何使用。控制台中总是出现以下错误:“Uncaught TypeError: document.querySelectorAll(...).closest is not a function”。

工作流程:基本上，当我单击带有 detail 类的输入之一，然后点击下面的按钮时，它应该向我显示最接近的 .parent .child 内具有类 detail 的所有元素。例如，当我点击第一个 input 并点击 button 时，我应该在我的 console.log() 中获得 3 个元素 detail 。使用纯 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>