Find operation
next([expr])
Summary
Gets a set of elements containing the next generation of each element in the matched set of elements.
This function returns only the next next sibling element, not all the subsequent siblings (you can use nextAll). It can be filtered with an optional expression.
parameter
Example
Description: Find peer elements next to each paragraph.
HTML code:
<p>Hello</p>
<p>Hello Again</p>
<div>
<span>And Again</span>
</div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
console.log($('p').next());//Represents returning all p tags after the previous p tag
})
Description: Find the element of class p in the peer element immediately behind each paragraph.
HTML code:
<p>Hello</p>
<p>Hello Again</p>
<div>
<span>And Again</span>
</div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
// Returns the last element of the specified element
console.log($('.p').next());//Represents that the return tag name is a div element after p
})
nextAll([expr])
Summary
Find all peer elements after the current element. Can be filtered with expressions
parameter
Example
Description: Find out that the class name is all the elements after div
HTML code:
<div> <div class="div">1</div> <div>2</div> <div>3</div> <div>4</div> </div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns all subsequent elements of the specified element
console.log($('.div').nextAll())
//Represents that finding the class name is all the elements after the div, excluding those elements whose class name is Div.
})
nextUntil([exp|ele][,fil])
Summary
Find all peer elements after the current element until the matching element is encountered.
If the provided jQuery represents a set of DOM elements, the. nextUntil() method also allows us to look through the DOM tree where all elements are located until we encounter an element that matches the provided parameters. This new jQuery object contains all the peer elements found below, but does not include the elements matched by that selector.
If no selector matches, or no parameters are provided, all peer elements that follow will be selected. This is the same as using. nextAll() without providing parameters.
parameter
Example
Description: Find the element between the class name div and the class name div2
HTML code
<div> <div class="div">1</div> <div class="div1">2</div> <div class="div2">3</div> <div>4</div> </div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns the element specified later between the two specified types
console.log($('.div').nextUntil('.div2'))//Indicates that the element whose class name is div and the element whose class name is div1 are found.
//The element between two class names is the element between them.
})
prev([expr])
Summary
Gets a set of elements containing the first sibling element next to each element in the matched set of elements.
It can be filtered with an optional expression. Only the adjacent peer elements will be matched, not all the previous peer elements.
parameter
Example
Description: Find the first peer element next to each paragraph.
HTML code:
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p class="p">And Again</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns the previous element of the specified element
console.log($('.p').prev())//Represents that the returned class name is the element of the p tag before the p tag
})
Description: Find the element named selected in the first sibling element next to each paragraph.
HTML code
<div> <span>Hello</span> </div> <p class="selected">Hello Again</p> <p>And Again</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns the previous element of the specified element
console.log($('p').prev('.selected'))//Represents the returned selected element with the previous tag name p
})
prevAll([expr])
Summary
Find all peer elements before the current element
It can be filtered with expressions.
parameter
Description: Find all the elements before the class name is selected
HTML code
<p>Hello Again</p> <p>And Again</p> <p class="selected">Hello Again</p> <p>And Again</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns all previous elements of the specified element
console.log($('.selected').prevAll())//Represents that all elements before the label name selected are returned
})
prevUntil([exp|ele][,fil])
Summary
Find all peer elements before the current element until the matching element is encountered.
If the provided jQuery represents a set of DOM elements, the. prevUntil() method also allows us to look through the DOM tree where all elements are located until we encounter an element that matches the provided parameters. This new jQuery object contains all the peer elements found earlier, but does not include the elements matched by that selector.
If no selector matches, or no parameters are provided, all peer elements in the front row will be selected. This is the same as using. prevAll() without providing parameters.
parameter
Example
Description: Find the element between the class name div and the class name div2
HTML code
<div> <div class="div">1</div> <div class="div1">2</div> <div class="div2">3</div> <div>4</div> </div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Returns an element between two specified types
console.log($('.div2').prevUntil('.div'))//Represents that the previous class name is the element between div and div2
})
siblings([expr])
Summary
Gets a set of elements containing all unique siblings of each element in a matched set of elements. Optional expressions can be used to filter.
parameter
Example
Description: Find all the peer elements of each p.
HTML code:
<div>
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
</div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Return results are elements of the current level
console.log($('p').siblings())//Represents that the current sibling element is returned
})
Description: Find all the peer elements of each div with the class named selected.
HTML code
<div>
<p>Hello</p>
<div class="selected">
<span>Hello Again</span>
</div>
<p>And Again</p>
</div>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Return results are elements of the current level
console.log($('p').siblings('.selected'))
//Represents the element returned at the current level and the element of type selected
})
children([expr])
Summary
Gets a set of elements containing all the child elements of each element in the set of matched elements.
The matched sub-elements can be filtered through optional expressions. Note: parents() will look for all ancestor elements, while children() only considers child elements and not all descendant elements.
parameter
Example
Description: Find each child element under ul.
HTML code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Get all the child elements of ul
console.log($('ul').children())//Represents all word elements returned under the current ul element
})
Description: Find. selected classes in each li.
HTML code
<ul> <li>1</li> <li>2</li> <li class="selected">3</li> <li>4</li> </ul>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Get all the child elements of ul
console.log($('ul').children('.selected'))
//Represents that the class name below the current ul element is the selected li tag
})
find(expr|obj|ele)
Summary
Searches for all elements that match the specified expression. This function is a good way to find the descendant elements of the element being processed.
All searches rely on jQuery expressions. This expression can be written using the selector syntax of CSS1-3.
parameter
Example
Description: Starting with all the paragraphs, further search for the following span elements. Same as $("p span").
HTML code:
<p> <span>Hello</span> , how are you?</p>
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Get all descendant elements of ul
console.log($('p').find('span'))//Represents the return of the span tag of the descendant element of the p tag
})
Acquisition of descendant elements & acquisition of ancestral elements
HTML code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="ul">
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
parent([expr]) gets the parent element
Overview: Get a set of elements that contain the unique parent of all matching elements.
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Get the parent element
console.log($('li').parent())//Represents that the parent element ul of the li tag is returned
console.log($('li').parent('.ul'));//Represents that the return is a parent element of the li tag and that the class name is an element of ul
})
parents([expr]) get ancestor elements
Overview: Get a set of elements containing ancestor elements of all matching elements (excluding the root element document). It can be filtered through an optional expression.
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Getting ancestor elements
console.log($('li').parents())//Represents the ancestor element of the li tag returned
})
parentsUntil
Summary
Find all parent elements of the current element until the matching element is encountered.
If the provided jQuery represents a set of DOM elements, the. parentsUntil() method also allows us to look through the ancestor elements of all elements until we encounter an element that matches the provided parameters. This returned jQuery object contains all the parent elements found below, but does not include the elements matched by that selector.
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Gets all elements up to the specified ancestor element
console.log($('li').parentsUntil('body'))
//Represents that the ancestor element of the li tag is returned and terminates to the body tag
})
offsetParent()
Summary
Returns the parent node that the first matching element is used to locate.
This returns the first element in the parent element whose position is set to relative or absolute. This method is only valid for visible elements.
jQuery code
$(document).ready(function(){//Setting up jQuery entries
//Get the parent element with location attributes
console.log($('.ul').offsetParent())//Look up tags with location elements from.ul
})