Home >Web Front-end >JS Tutorial >Detailed explanation of the use of jQuery filter method filter()

Detailed explanation of the use of jQuery filter method filter()

php中世界最好的语言Original: 2018-04-24 11:52:183465browse

This time I will bring you a detailed explanation of the use of the jQuery filtering method filter(). What are the precautions when using the jQuery filtering method filter(). The following is a practical case, let's take a look.

Now there is a need to select all elements with background images.

This problem is a bit tricky. We cannot use selection expressions to complete this problem.
Use jQuery's DOM filtering method filter() can select elements based on any conditions expressed in the function.
The filter method in jQuery allows passing a string (that is, a selector expression) as a parameter.
Or pass is a function. Its return value will define whether an element is selected.
The function passed will be run on each element in the current selection set.
When the function returns false, the corresponding function starts from the selection are deleted collectively. Whenever the return value is true, the corresponding element
is not affected.

jQuery(&#39;*&#39;).filter(function(){ 
return !!jQuery(this).css(&#39;
background
&#39;); 
});

The above code selects all elements with background images.
The initial set is all elements ( *). Then call filter() with a function as a parameter.
This function determines whether there is an attribute background attribute on each collection.
If there is, keep it. Otherwise, delete this from the result set Element.
What you see!! is javascriptany undefined, empty type, and of course false.
If the function call returns these values, then the function returns false, thus Remove
elements without a background attribute from the collection.
Actually, !! is not necessary because jQuery will convert these return values to Boolean types. But it is still a good idea to retain.
In this way, anyone who sees your code can be absolutely sure of your intention. (This helps the readability of the code).
In the function passing a filter(), it can be referenced through the this keyword The current element.
Include it in the jQuery function and it becomes a jQuery object.
this //Regular element object.
jQuery(this) //jQuery object.
The following is Some examples to stimulate your imagination.

jQuery(&#39;p&#39;).filter(function(){ 
var width = jQuery(this).width; 
return width >100 && widht < 200; 
}); 
//返回子元素有10个或者20个的元素. 
jQuery(&#39;*&#39;).filter(function(){ 
var children = jQuery(this).childern().length; 
return children ===10 || children ===20; 
});

<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> 
<p class="c1">Bye Bye Beautiful</p> 
<p class="c2">Nothing but the girl</p> 
<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 = $(&#39;*&#39;).filter(function(index) { 
return !$(this).css(&#39;background-color&#39;); 
}); 
$.each(ret, function(index, val) { 
$(val).css(&#39;background-color&#39;,&#39;black&#39;); 
}); 
}); 
</script> 
</body> 
</html>

I believe you have mastered the method after reading the cases in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Detailed explanation of the use of jQuery filter method filter()

Related articles