как указать номер в регулярном выражении querySelectorAll - PullRequest
Новая
       88

как указать номер в регулярном выражении querySelectorAll

0 голосов
/ 03 мая 2020

Я работаю с деревом флажков и играю с их статусом видимости. Вот простое дерево из 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 - не дети.

1 Ответ

0 голосов
/ 03 мая 2020

Если нужный элемент всегда идет после элемента с id, который вы передаете функции, вы можете использовать соседний братский комбинатор (+) , чтобы выбрать и заменить 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>
...