如何在 querySelectorAll 正则表达式中指定数字

Question

我使用复选框树并使用它们的可见状态。 这是一个包含 3 个复选框的简单树

<div id="d1">
    <input type="checkbox" id="c1"  onclick="gestion('1')" >
    <label>1</label>
</div>
<div id="d1.1" class="initialHide">
    <input type="checkbox" id="c1.1" onclick="gestion('1.1')">
    <label>1.1</label>
</div>
<div id="d1.1.1" class="initialHide">
    <input type="checkbox" id="c1.1.1" onclick="gestion('1.1.1')">
    <label>1.1.1</label>
</div>

这是我脚本的开头

function gestion(id){
    var rechercheDiv='[id^="d'+id+'."]';
    var listDiv = document.querySelectorAll(rechercheDiv)

这是我的问题：我只想 select 当前复选框的 div 的子 div。 d1 只有 d1.1 作为直接子级。 但是我在 querySelectorAll 中使用的正则表达式返回所有子 div。

有没有办法修改我的正则表达式以仅获取直接孩子？ 伪代码以 d 开头，然后是 id。 然后是数字然后没有别的。 例如：给定 d1 d1.1 是孩子，而 d1.1.1 不是孩子。

Answer 1

如果您想要的元素总是在您传递给 function 的id元素之后，您可以使用相邻的兄弟组合符 ( + )到 select 并将Document.querySelectorAll()替换为Document.querySelector() ：

 function getCheckbox(id){ return document.querySelector(`[id="d${ id }"] + [id^="d${ id }."]`); } document.onchange = (e) => { console.log(getCheckbox(e.target.id.substring(1))); }; console.log(getCheckbox('1')); console.log(getCheckbox('1.1')); console.log(getCheckbox('1.1.1'));

 label { display: block; }.as-console-wrapper { max-height: 67px;important; }

 <label id="d1"> <input type="checkbox" id="c1" /> 1 </label> <label id="d1.1"> <input type="checkbox" id="c1.1" /> 1.1 </label> <label id="d1.1.1"> <input type="checkbox" id="c1.1.1" /> 1.1.1 </label>

如果不是这种情况，并且您之间可能还有其他元素，则可以使用通用兄弟组合器（ ~ ）来代替：

 function getCheckbox(id) { return document.querySelector(`[id="d${ id }"] ~ [id^="d${ id }."]`) } document.onchange = (e) => { console.log(getCheckbox(e.target.id.substring(1))); }; console.log(getCheckbox('1')); console.log(getCheckbox('1.1')); console.log(getCheckbox('1.1.1'));

 label { display: block; }.as-console-wrapper { max-height: 67px;important; }

 <label id="d1"> <input type="checkbox" id="c1" /> 1 </label> <span></span> <label id="d1.1"> <input type="checkbox" id="c1.1" /> 1.1 </label> <span></span> <label id="d1.1.1"> <input type="checkbox" id="c1.1.1" /> 1.1.1 </label>