How to filter and select elements based on various criteria with jQuery?

To filter and select elements based on various criteria with jQuery, you can use the combination of the .filter() and .not() methods. Here are some examples:

Filtering by CSS selectors:

// Filter elements with a specific CSS class
var filteredElements = $('.myClass').filter('.otherClass');

// Filter elements without a specific CSS class
var filteredElements = $('.myClass').not('.otherClass');

// Filter elements with a specific attribute
var filteredElements = $('[data-attr]').filter('[data-attr="value"]');

Filtering by element properties:

// Filter elements by their value
var filteredElements = $('input[type="text"]').filter(function() {
    return $(this).val().toLowerCase() === 'search';
});

// Filter elements by their visibility
var filteredElements = $('.myClass').filter(':visible');

Filtering by custom conditions:

// Filter elements based on a custom condition
var filteredElements = $('.myClass').filter(function() {
    return $(this).height() > 100;
});

// Filter elements based on a custom function
function customFilter(index) {
    return index % 2 === 0;
}

var filteredElements = $('.myClass').filter(customFilter);

You can then perform operations on the filtered elements, such as adding/removing classes, manipulating their content, or binding events using jQuery methods.