香草JS:根据光标位置选择父级中具有类的所有元素

Question

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

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

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