How to exclude a DOM element from a jquery selector (demo)

2020-03-30 02:41:45
OfStack

There are many jquery selectors, and there are many ways to select a DOM. How to make some exclusions on a selected set of elements? The following is illustrated by several examples:

1. Select all img elements, excluding the number of class=phpernote elements:

$('img:not(.phpernote)').length();// or $('img').not('.phpernote').length();

2. Get the number of all li elements without class=com under id=phpernote


$('#phpernote li:not(.com)').size();// or $('#phpernote li').not('.com').length();

3. Set the background of the li element on all the odd lines below id=phpernote

$('#phpernote li').not(':even').css('background-color', 'red');

Attached example: in jQuery, the specified element is excluded, while all remaining elements are selected

Scenario: a page USES js delayed loading technology to handle all images to improve the user experience, but there are a few images that do not want to be delayed loading, so it is required to single them out.
I studied the API documentation of jQuery and got it right. JQuery is really convenient. Post it here for backup:

<!doctype html>
<html>
 <head>
  <title> Yang guo under the bodhi tree </title>
  <script type="text/javascript" src="http://img.24city.com/js/jquery-1.4.3.min.js"></script>
  <script type="text/javascript">
   $().ready(function(){
    $("div:not([delay='false'])").css("color","#f00"); 
   })
  </script>
 </head>
 <body>
  <div>div 1</div>
  <div delay="false">div 2</div>
  <div>div 3</div>
 </body>
</html>

The code above will exclude div with the additional property "delay" and equal to "false", and then select all the rest div and set it to red.