jQuery 过滤not()与filter()实例代码


以下是一个使用jQuery的`not()`和`filter()`方法的实例代码。这个示例将展示如何从一个元素集合中筛选出特定的元素,并排除掉一些不需要的元素。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery not() and filter() Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .selected { color: red; }
</style>
</head>
<body>

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item odd">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item odd">Item 5</li>
</ul>

<script>
$(document).ready(function(){
  // 使用filter()方法选择所有class为"item"的元素,并进一步筛选出class为"odd"的元素
  $('.item').filter('.odd').addClass('selected');
  
  // 使用not()方法选择所有class为"item"的元素,但排除掉class为"odd"的元素
  $('.item').not('.odd').each(function() {
    $(this).text($(this).text() + ' (not odd)');
  });
});
</script>

</body>
</html>

在这个例子中,我们首先使用`filter()`方法从所有class为`item`的元素中筛选出同时拥有`odd`类的元素,并为这些元素添加了一个`selected`类,这会使得这些元素的文本颜色变为红色(通过CSS定义)。

然后,我们使用`not()`方法从所有class为`item`的元素中排除掉拥有`odd`类的元素,并对这些剩余的元素执行一个操作:在它们的文本内容后添加`(not odd)`字符串。

这两个方法共同展示了如何在jQuery中根据特定的条件来筛选和排除元素集合中的元素。