Vanilla JS：Select 所有元素在基于光标位置的父元素中 class

Question

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

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

工作流程： 基本上，当我用 class detail 单击输入之一，然后点击下面的 button 时，它应该向我显示最近的 .parent .child 内带有 class 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>

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

实例：

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>

Vanilla JS：Select 所有元素在基于光标位置的父元素中 class

Vanilla JS: Select all elements with class within parent based on cursor position

html

javascript

parent-child

closest