我有兩個具有相同類名的 div，每個內部都有一個輸入。第一個有 id，第二個 - 不，我需要用 id 獲得最接近我的輸入的輸入。我無法將 id 設定為第二個輸入，或更改 div 的類名。
HTML -
<div class="picker">
<input id="myInput"/>
</div>
<div class="picker">
<input/> <-- which I need to get ->
</div>
我嘗試使用類似下面的東西，但是，這個操作回傳了我的第一個輸入。
$("#myInput").closest("input")
uj5u.com熱心網友回復：
因此，您需要選擇父“選擇器”，然后您需要選擇下一個“選擇器”，然后找到輸入。
const inp = $("#myInput").closest('.picker').next('.picker').find('input');
inp.val('found it');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="picker">
<input id="myInput" />
</div>
<div class="picker">
<input/>
<-- which I need to get ->
</div>uj5u.com熱心網友回復：
更簡單的選擇
有一個比使用單個 css 選擇器回傳目標輸入的選定答案更簡單的解決方案。
const selector = ".picker:has(input[id]) ~ .picker input:not([id])";
$(selector) // jQuery
document.querySelector(selector) // native JavaScript
選擇器的作業原理
.picker:has(input[id])選擇包含帶有 id 的輸入的選擇器。
~ .picker input:not([id])選擇下一個不帶 id 的選擇器輸入。
請注意，:has() 選擇器始終適用于 jQuery，但它可能不適用于原生 JavaScript/css（請參閱：瀏覽器兼容性）。另請參閱后續兄弟組合器以了解波浪號的作業原理。
片段
該片段顯示了即使嵌套在其他元素中，我們也如何找到目標輸入。
const selector = ".picker:has(input[id]) ~ .picker input:not([id])";
console.log("jQuery:", $(selector)[0]);
try {
console.log("Native:", document.querySelector(selector));
}
catch(error) {
console.error("Native: Your browser does not support the :has() selector.");
}<div class="picker"><input/></div>
<div></div>
<div class="picker"><div></div><div><input id="myInput"/></div></div>
<div></div>
<div class="picker"><input data-tag="correct" /></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/526329.html