Question

<div id="container">
  <p class="text">First</p>
  <p class="text">Second</p>
  <p class="text other">Third</p>
  <p class="text last">Fourth</p>
</div>

使用document.getElementsByClassName('text')我获得了所有4个元素。如何选择类text但不类last的每个元素？还应选择text other。

使用Javascript / JQuery有一些简单的方法来实现这一点吗？

Answer 1

您可以使用:not()选择器，因此它应为$('.text:not(.last)')或$('.text').not('.last')

＆＃13;

$('.text:not(.last)').css('color', 'red')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p class="text">First</p>
  <p class="text">Second</p>
  <p class="text other">Third</p>
  <p class="text last">Fourth</p>
</div>

＆＃13;

Answer 2

您可以将querySelectorAll与not

一起使用

document.querySelectorAll('p.text:not(.last)');

Answer 3

使用HTML5选择器API querySelectorAll()和:not()选择器：

document.querySelectorAll('.text:not(.last)')

工作代码示例：

document.querySelectorAll('.text:not(.last)').forEach(function(p){
  console.log(p.textContent)
});

<div id="container">
  <p class="text">First</p>
  <p class="text">Second</p>
  <p class="text other">Third</p>
  <p class="text last">Fourth</p>
</div>

使用jQuery $('.text:not(.last)')

工作代码示例：

$('.text:not(.last)').each(function(){
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <p class="text">First</p>
  <p class="text">Second</p>
  <p class="text other">Third</p>
  <p class="text last">Fourth</p>
</div>

如何从选择中按类名排除元素？

3 个答案: