With the selected element as the center, searching inside can be done through the find and children methods. If you search upward, that is, to find the parent and ancestor elements of the current element, jQuery provides the closest() method. This method is similar to parents but has some subtle differences. It is a method that is frequently used
closest( ) method accepts a selector string that matches the element
Start from the element itself, match up to the superior element step by step in the DOM tree, and return the first matched ancestor element
For example: in In the div element, search all li elements upwards, which can be expressed like this
$("div").closet("li')
Note: jQuery is a collection object , so the jQuery collection or element given by the closest() method
closest() method is used to filter the elements
Similarly because jQuery is a collection object, it is possible This collection object needs to be filtered to find the target element, so it is allowed to pass a jQuery object
Note: You need to pay special attention when using it
) and .closest() are somewhat similar. They both traverse the ancestor elements upwards, but there is still a difference between the two, otherwise there will be no meaning of existence.
The starting position is different: closest starts from the current element The traversal targets of parents starting from the parent element are different:
closest To find the specified target, parents traverses to the root element of the document, closest searches upwards, and stops searching until it finds a match. Parents searches all the way to the root element. And add the matching elements to the collection
The results are different: closest returns a jquery object containing zero or one element, and parents returns a jquery object containing zero or one or more elements
Let’s look at a piece of code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 200px;
}
.left div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
span {
color: blue;
}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<h2>closest方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</div>
</div>
<br/>
<button>点击：closest传递选择器 </button>
<button>点击：closest传递一个元素对象</button>
<script type="text/javascript">
$("button:first").click(function() {
$('li.item-1').closest('.level-2').css('border', '1px solid red');
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
var itemB = $('.item-b')
$('li.item-1')
.closest(itemB)
.css('border', '1px solid blue');
})
</script>
</body>
</html>
Next Section