Home > Developer > Web Develop
jquery filter Element functions
1. Filtering
Match the second P element:
$ ("button"). Click (function () {
$ ("P"). EQ (1). CSS ("Color", "red");
});
Match the first LI element:
$ ("button"). Click (function () {
$ ("Li"). First (). CSS ("Color", "red");
});
Match the last element:
$ ("button"). Click (function () {
$ ("Li"). Last (). CSS ("Color", "red");
});
Checks whether the matched element contains the specified class:
$ ("button"). Click (function () {
if ($ ("P"). Hasclass ("Hello"))
{alert ("exists")}
})
Filters out the collection of elements that match the specified expression. To narrow the range of matches:
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). Filter (". Hello"). CSS ("Color", "red");
});
});
Detects a collection of matching elements based on a selector, DOM element, or JQuery object
$ (document). Ready (function () {
$ ("button"). Click (function () {
if ($ ("P"). Last (). is (". Hello"))
{Alert ("Yes")}
});
});
Filters out elements that contain the specified child elements
$ (document). Ready (function () {
$ ("button"). Click (function () {
if ($ ("div"). has ("P"))
{Alert ("Yes")}
});
});
Exclude elements that can be matched by parameters
Exclude the div with the P element:
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("div"). Not ("P"). CSS ("Color", "red");
});
});
Slice () intercepts the specified number of elements (intercept interval) starting at the specified index
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). Slice (1,5). CSS ("Color", "red");
});
});
<body>
<p>p</p>
<p class= "Hello" >pp</p>
<div>div
<p>dp</p>
<p>dp1</p>
<p>dp2</p>
</div>
<div class= "DD" >dd</div>
<b>Hello</b>
<button>fuzhi</button>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
2. Find
Gets a collection of elements that contains all the child elements of each element in the matching element collection.
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("div"). Children (). CSS ("Color", "red"); All child elements
$ ("div"). Children (". P1"). CSS ("Color", "red"); The specified child element
});
});
Closest () returns the first match to the parent of the condition, starting with the current element
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("span"). Closest ("P"). CSS ("Color", "red");
});
});
Find () finds child elements from the specified element
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). FIND ("span"). CSS ("Color", "red");
});
});
Next () Gets the next sibling element of the specified element
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". P1"). Next (). CSS ("Color", "red");
});
});
Nextall () gets all subsequent sibling elements (excluding itself)
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". P1"). Nextall (). CSS ("Color", "red");
});
});
Nextuntil () Gets the next sibling element until the argument can match, excluding the end condition.
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". One"). Nextuntil (". P2"). CSS ("Color", "red");
});
});
Offsetposition () returns the first ancestor element used for positioning, that is, finding elements in the ancestor element that position to relative or absolute.
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("span"). Offsetposition (). CSS ("Background-color", "Red");
});
});
Parent () Gets the immediate parent element of the specified element
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("span"). Parent (). CSS ("Color", "red");
});
});
Parents () gets all the ancestor elements of the specified element, until <body></body>
Parentsuntil () finds all the parent elements of the current element until it encounters the matching element.
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("span"). Parentsuntil ("div"). CSS ("Color", "red");
});
});
Prev () Gets the previous sibling element of the specified element
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". P2"). Prev (). CSS ("Color", "red");
});
});
Prevall () gets all the sibling elements in front of the specified element
Prevuntil () gets all the sibling elements in front of the specified element until the conditions in the argument match. Note that the parameter conditions themselves are not matched
Siblings () Gets the sibling element of the specified element, in front and back
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". P2"). Siblings (). CSS ("Color", "red");
});
});
<body>
<p>p</p>
<p class= "One" >p</p>
<p class= "Hello" >pp</p>
<p class= "P2" >dp</p>
<div style= "width:70%;p osition:absolute;left:250px;top:150px" > Positioning div
<p class= "P1" >dp</p>
<P>DP1 <span>sp</span></p>
<p>dp2</p>
</div>
<div class= "DD" >DD </div>
<b>Hello</b>
<button >fuzhi</button>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
3. Tandem
Add () adds the selected element to the collection of jquery objects
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". One"). Add ("span"). CSS ("Color", "red");
});
});
Andself () adds itself to the selected jquery collection to facilitate one-time operation
Gets all the sibling elements after the one class, including itself:
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". One"). Nextall (). Andself (). CSS ("Color", "red");
});
});
End () will change the action selected by the current selector back to the previous state.
The next plus end () of the PP paragraph returns, so the match is itself:
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". Hello"). Next (). End (). CSS ("Color", "red");
});
});
<body>
<div>
<p class= "One" >p</p>
<p class= "Hello" >pp</p>
<p class= "P2" >dp</p>
</div>
<div >div
<p class= "P1" >dp</p>
<P>DP1 <span>sp</span></p>
<p>dp2</p>
</div>
</body>
jquery filter Element functions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
