The jQuery filter method filter of selects elements with special attributes
- 2020-03-30 03:21:15
- OfStack
There is now a requirement to select all elements with a background image.
This problem is a bit tricky. We can't use the selection expression to complete the problem.
Using jQuery's DOM filtering method filter(), you can select elements based on any criteria expressed in the function.
The filter method in jQuery allows you to pass a string (that is, a selector expression) as an argument.
Or you pass a function whose return value defines whether an element is selected.
The passed function runs on each element in the current selection set.
When a function returns false, the corresponding function is removed from the selection set
Not affected.
The above code selects all elements that have a background image.
The initial set is all the elements (*). Then call filter() with a function as an argument.
This function determines whether there is a background attribute on each collection,
If so, keep it; otherwise, delete the element in the result set.
What you see!! It's any undefined, empty type in javascript, and of course false.
If the function call returns these values, the function returns false and is deleted from the collection
An element without a background attribute.
In fact,!!!!! Not necessary. Because jQuery will convert these return values to Boolean types. But retention is still a good idea.
This way, when anyone sees your code, they can be absolutely sure of your intentions.
In the function passing a filter(), the current element can be referenced by the this keyword.
Including it in a jQuery function becomes a jQuery object.
This // regular element object.
JQuery (this) //jQuery object.
Here are some examples to spark your imagination.
Here's a code example: identify elements with a background color and change all their background colors to black.
This problem is a bit tricky. We can't use the selection expression to complete the problem.
Using jQuery's DOM filtering method filter(), you can select elements based on any criteria expressed in the function.
The filter method in jQuery allows you to pass a string (that is, a selector expression) as an argument.
Or you pass a function whose return value defines whether an element is selected.
The passed function runs on each element in the current selection set.
When a function returns false, the corresponding function is removed from the selection set
Not affected.
jQuery('*').filter(function(){
return !!jQuery(this).css('background');
});
The above code selects all elements that have a background image.
The initial set is all the elements (*). Then call filter() with a function as an argument.
This function determines whether there is a background attribute on each collection,
If so, keep it; otherwise, delete the element in the result set.
What you see!! It's any undefined, empty type in javascript, and of course false.
If the function call returns these values, the function returns false and is deleted from the collection
An element without a background attribute.
In fact,!!!!! Not necessary. Because jQuery will convert these return values to Boolean types. But retention is still a good idea.
This way, when anyone sees your code, they can be absolutely sure of your intentions.
In the function passing a filter(), the current element can be referenced by the this keyword.
Including it in a jQuery function becomes a jQuery object.
This // regular element object.
JQuery (this) //jQuery object.
Here are some examples to spark your imagination.
jQuery('div').filter(function(){
var width = jQuery(this).width;
return width >100 && widht < 200;
});
//Returns elements with 10 or 20 children.
jQuery('*').filter(function(){
var children = jQuery(this).childern().length;
return children ===10 || children ===20;
});
Here's a code example: identify elements with a background color and change all their background colors to black.
<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<div class="c1">Bye Bye Beautiful</div>
<div class="c2">Nothing but the girl</div>
<p>The Lazy song</p>
<h2>If I die young</h2>
<h3>New soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>