Vanilla JS：根據光標位置選擇父類中具有類的所有元素

Question

我的上課parent有幾個要點。 它們始終具有相同的子代： child和child具有class detail多個元素。 我一直想根據我當前的光標位置讀出最近的.parent .child所有具有類detail的元素。

使用document.querySelectorAll('.details'); 我都得到了，這是錯誤的。 我試圖使用closest() ， find()和parent() ，但是我不知道怎么做。 始終在控制台中獲取關注錯誤： "Uncaught TypeError: document.querySelectorAll(...).closest is not a function" 。

工作流程：基本上，當我單擊具有類detail的輸入之一，然后button下面的button ，它應該向我顯示最近的.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> 

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>