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

【问题标题】：how to specify number in querySelectorAll regex如何在 querySelectorAll 正则表达式中指定数字
【发布时间】：2020-08-18 01:01:08
【问题描述】：

我使用复选框树并使用它们的可见状态。这是一个包含 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)

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

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

【问题讨论】：

你没有使用正则表达式，这些是 css 选择器。
d1.1 不是直系子女
“子”是 HTML 和 CSS 中定义的含义。 “直接孩子”没有，复选框不能有孩子。你真正在寻找什么？
对不起，使用术语 child 可能会造成混淆。当我选中复选框 c1 时，我想显示 div d1.1。当我选中复选框 c1.1 时，我想显示 div d1.1.1。当我取消选中复选框 c1 时，我想隐藏 div d1.1 和 d1.1.1。等等。就是复选框树的逻辑

标签： javascript css-selectors selectors-api

【解决方案1】：

如果你想要的元素总是在你传递给函数的带有id的元素之后，你可以使用adjacent sibling combinator (+)来选择Document.querySelectorAll()并将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>

如果不是这样，并且您之间可能还有其他元素，您可以使用general sibling combinator (~) 来代替：

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>

【讨论】：