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>
              .
              .

我希望选择所有且只有那些没有的div minor.

我试过了

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>