如何在纯javascript中编写$(":not(selector)")
?
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>
任何想法?
使用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)
这样的双重否定更清晰(也可能更快)
为什么不在纯CSS中切换有选择器的类呢?
.className {
color: blue;
}
var myitem = document.querySelector('.item')
myitem.classList.toggle('className');
如果我不能控制HTML,我就会使用: