使用 querySelector 排除 id 包含特定字符串的元素答案

【问题标题】：Using querySelector exclude elements whose id's include a specific string使用 querySelector 排除 id 包含特定字符串的元素
【发布时间】：2016-10-16 04:31:43
【问题描述】：

我想得到 id 不包含字符串的结果（假设它是“test”）

<ul class="numberlist">
  <li id="test1" style="display:none">
    <div></div>
  </li>
  <li>
    <a>one</a>
  </li>
  <li>
    <a>two</a>
  </li>
  <li>
    <a>three</a>
  </li>
  <li id="test2" style="display:none">
    <div></div>
  </li>
  <li>
    <a>four</a>
  </li> 
  <li id="test" style="display:none">
    </div></div>
  </li>
</ul>

正如我所说，我想排除包含字符串 test 的 id。我怎样才能实现它？

我可以通过写得到<li>的列表

document.querySelectorAll('ul.numberList')

但我想通过他们的 id 排除其中一些。

【问题讨论】：

标签： javascript html jquery-selectors

【解决方案1】：

我猜你正在寻找 :not() 和“开头”选择器：

document.querySelectorAll('ul.numberList li:not([id^=test])')

（或者如果您想要“包含”而不是“开头”，则将 ^ 替换为 *）

【讨论】：

他没有说“如果 id 以开头”，而是说“如果 id 包含”，所以我认为这里使用的修饰符不正确。
@Mike 见我回答的最后一行。
是的，在我提交评论后看到了。谢谢。
谢谢，您的回答帮助我弄清楚了以下问题 - 我想根据一个 id 字符串进行查询，但从另一个 id 字符串中排除：document.querySelectorAll('[id^="primary_container"]:not([id="primary_container-__prefix__"])')

【解决方案2】：

您可以将 attribute contains selector 与 :not() 伪类选择器一起使用

document.querySelectorAll('ul.numberlist li:not([id*="test"])')

console.log(document.querySelectorAll('ul.numberlist li:not([id*="test"])').length)

<ul class="numberlist">
  <li id="test1" style="display:none">
    <div></div>
  </li>
  <li>
    <a>one</a>
  </li>
  <li>
    <a>two</a>
  </li>
  <li>
    <a>three</a>
  </li>
  <li id="test2" style="display:none">
    <div></div>
  </li>
  <li>
    <a>four</a>
  </li>
  <li id="test" style="display:none">
    <div></div>
  </li>
</ul>

仅供参考： document.querySelectorAll('ul.numberList') ，不会获得所有 li 元素，而是获得所有 ul 类 numberList。要获取所有li 内部使用选择器ul.numberList li。同样在您的 html 类名称中是 numberlist 而不是 numberList。

【讨论】：