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

Question

我想获得其 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 排除其中一些。

Answer 1

我猜您正在寻找 :not() 和 "starts with" 选择器：

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

（如果您想要 "includes"，而不是 "starts with"，则将 ^ 替换为 *）

Answer 2

你可以使用attribute contains selector with :not()伪class选择器

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>

FYI : document.querySelectorAll('ul.numberList') ，没有得到所有 li 元素，而是得到所有 ul 和 class numberList。要获得所有 li 内部使用选择器作为 ul.numberList li。同样在你的 html class 名称中是 numberlist 而不是 numberList.

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

Using querySelector exclude elements whose id's include a specific string

html

javascript

jquery-selectors