javascript - JS 和 querySelectorAll

Question

querySelectorAll 问题，很可能是个愚蠢的问题，但我没有看到解决方案。

我有类似下面的内容

<div id="main_0"> ... </div>
<div id="main_1"> ... </div>
<div id="main_1_minor"> ... </div>
<div id="main_2"> ... </div>
<div id="main_2_minor"> ... </div>
              .
              .

我希望选择所有且仅选择那些没有 minor 的 div。

我试过了

var pattern = new RegExp('^main_\\d');
var elSelected = document.querySelectorAll('div[id^=main_]');
elSelected.filter(elt => pattern.test(elt.id)));

但显然这还不够。我不确定如何通过 RegEx 来表示 id 值必须以数字结尾。我尝试了类似 RegExp('^main_\\d$'); 但我没有做对。

Answer 1

您可以将 :not() 选择器与“属性结尾为”选择器一起使用。

"div:not([id$=minor])"

如果它还应验证 id 以 main_ 开头，那么您也可以在问题中显示时添加它。

"div[id^=main_]:not([id$=minor])"

所以这表示 “选择所有 div 元素，其中 id 以 main_ 开头并且不以 minor 结尾”。

如果 minor 不一定在末尾，那么您可以使用 id*=minor 代替“包含”。

document.querySelectorAll("div[id^=main_]:not([id$=minor])")
  .forEach(el => el.style.color = "red");

<div id="main_0"> main </div>
<div id="main_1"> main </div>
<div id="main_1_minor"> main ends with minor </div>
<div id="main_2"> main </div>
<div id="main_2_minor"> main ends with minor </div>