Methods to implement element traversal: 1. children(), which can return all direct child elements of the selected element; 2. closest(), which can return the first ancestor element of the selected element; 3. each (), execute the function for each matching element; 4. filter(), which can filter the specified element; 5. nextAll(), etc.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery provides a variety of methods for traversing elements
##Method | Description |
add() | Add elements to the set of matching elements |
addBack() | Add the previous set of elements Add to the current collection |
children() | Returns all direct child elements of the selected element |
closest() | Returns the first ancestor element of the selected element |
contents() | Returns all direct child elements of the selected element (including text and Comment node) |
each() | Execute the function for each matching element |
end() | End the most recent filtering operation in the current chain, and return the set of matching elements to the previous state |
eq() | Returns the selected elements The element with the specified index number |
filter() | Reduce the set of matching elements to new elements that match the selector or the return value of the matching function |
find() | Returns the descendant elements of the selected element |
first() | Returns the first element of the selected element elements |
has() | Returns all elements that have one or more elements inside them |
is( ) | Checks the set of matching elements based on the selector/element/jQuery object and returns true if there is at least one matching element |
last() | Return the last element of the selected element |
map() | Pass each element in the current matching set to the function and generate a new jQuery containing the return value Object |
next() | Returns the next sibling element of the selected element |
nextAll()| | Returns all sibling elements after the selected element |
nextUntil() | Returns the sibling elements after each element between the two given parameters All sibling elements |
not() | Remove elements from the set of matching elements |
offsetParent() | Returns the first positioned parent element |
parent() | Returns the direct parent element of the selected element |
parents() | Returns all ancestor elements of the selected element |
parentsUntil() | Returns between the two given parameters All ancestor elements between |
prev() | Returns the previous sibling element of the selected element |
prevAll( ) | Returns all sibling elements before the selected element |
prevUntil() | Returns every element between the two given parameters All sibling elements before the selected element |
siblings() | Returns all sibling elements of the selected element |
slice() | Reduce the set of matching elements to a subset of the specified range |
There are two methods for traversing child elements:
Difference:
The children() method returns all direct child elements of the selected element (direct child elements, only look for sons and not grandchildren (: that is to say, it will not traverse recursively)
find( ) method to obtain the descendants of each element in the current element collection (note that the find() method must pass parameters, otherwise it will be invalid)
Example: Query all child elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>Copy after login
There are 7 methods to traverse sibling elements:
siblings() method, which is mainly used to obtain all elements at the same level of a specified element
next() method, mainly used to obtain the next sibling element of the specified element
nextAll() method, mainly used to obtain the specified element All elements of the next sibling of the element
nextUntil() method is mainly used to obtain the next sibling element of the specified element. This sibling element must be the same as the specified element and nextUntil( ) method to set elements between elements
prev() method, mainly used to obtain the upper level sibling elements of the specified element
prevAll() method, mainly used to obtain all sibling elements at the previous level of the specified element
prevUntil() method, mainly used to obtain the previous sibling element of the specified element, This sibling element must be an element between the specified element and the element set by the prevUntil() method
siblings() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>Copy after login
next() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>
</html>
Copy after login
nextAll() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').nextAll().css('background-color', 'red');
</script>
</body>
</html>
Copy after login
nextUntil() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").nextUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
<li class="start">li (类名为"start"的兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
<li class="stop">li (类名为"stop"的兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>
</body>
</html>Copy after login
prev() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
</body>
</html>Copy after login
prevAll() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (parent)
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li>li (类名为"start"的li的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>
</body>
</html>Copy after login
prevUntil() method
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="stop">li (类名为"stop"的兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
<li class="start">li (类名为"start"的li节点)</li>
<li>li (兄弟节点)</li>
<li>li (兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>
</body>
</html>Copy after login
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to implement element traversal in jquery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
