在普通/纯JavaScript中，如何使用"$（：not（选择器））"？

Question

我该如何用普通的JavaScript编写$(":not(selector)")？

jQuery：

var links = $('a:not(.not-lightbox-item a)', this);

HTML:

<div id="links">
    <div class="not-lightbox-item">
        <a href="projects.html" class="button-back">
            <span class="glyphicon glyphicon-hand-left glyphicon-circle-arrow-leftx" title="Back"></span>
        </a>

        <h2 class="heading item-heading">(Title) Ways of Something</h2>

        <p>Lorem ipsum dolor sit amet <a href="#">Excepteur sint occaecat</a> cupidatat non proident</p>
    </div>

    <a href="images/banana.jpg" title="Banana">
        <img src="images/thumbnails/banana.jpg" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Apple">
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Orange">
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </a>
</div>

有什么想法吗？

- Run

---

document.querySelectorAll。 - Daniel A. White

document.querySelector(":not(yourselectors)") - Power Star

点赞问题。这是合法的。 - George Katsanos

Answer 1

使用 document.querySelector 或 document.querySelectorAll 作为解决方案：

//returns first element matching
document.querySelector("a:not(.not-lightbox-item a)");

//returns all elements matching
document.querySelectorAll("a:not(.not-lightbox-item a)");

然而@George Katsanos是正确的，使用像.lightbox-item这样的类比使用双重否定如a:not(.not-lightbox-item a)更清晰（可能也更快）。

- n00dl3

---

今天有这么多讨厌的人！ - Run

在 TypeScript / Shadow DOM 中无法工作。 - Monir Khan

Answer 2

为什么不在纯CSS中切换具有选择器应用的类？

.className {
  color: blue;
}

var myitem = document.querySelector('.item')
myitem.classList.toggle('className');

如果我无法控制HTML，我会使用:not。

- George Katsanos

---

谢谢。我想我会选择 links = this.getElementsByClassName('lightbox-item');。 - Run