Home > Article > Web Front-end > How to get the parent element of an element using the parent() method? Detailed explanation of parent() method case
Definition and Usage
parent() Gets the parent element of each element in the current set of matching elements. Filtering with a selector is optional.
.parent(selector)
selector: String value containing the selector expression used to match the element.
Syntax structure:
$(":parent")
This selector is generally used in conjunction with other selectors, such as Class selector and element selectors and so on. For example:
$("div:parent").animate({width:"300px"})
The above code can set the width of a div containing text or elements to 300px.
If not used with other selectors, the default state is to be used with the * selector, for example, $(":parent") is equivalent to $("*:parent").
Details
Given a jQuery object representing a collection of DOM elements, the .parent() method allows us to search the DOM tree for the parent elements of these elements and construct a new one with the matching elements. jQuery object. The .parents() method is similar to the .parent() method, except that the latter traverses a single level up the DOM tree.
This method accepts an optional selector expression of the same type as the parameter we passed to the $() function. If this selector is applied, elements will be filtered by testing whether they match the selector.
Example
Find the parent element of each paragraph with the "selected" class:
$("p").parent(".selected")Consider this page with a basic nested list:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<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>
</li>
<li class="item-iii">III</li>
</ul>If we start with item A, we can find its parent element:
$('li.item-a').parent().css('background-color', 'red');
The result of this call is to set a red background for the level-2 list. Since we didn't apply a selector expression, the parent element naturally becomes part of the object. If a selector is applied, the element is checked to see if it matches the selector before it is included.
Example 1 code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<button>点击查看效果</button>
</body>
</html>Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php.cn</title>
<style type="text/css">
div{
list-style-type:none;
width:150px;
height:30px;
border:1px solid red;
}
span{border:1px solid green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("*:parent").animate({width:"300px"})
})
})
</script>
</head>
<body>
<div>我是文本</div>
<div></div>
<span>大家好</span>
<button>点击查看效果</button>
</body>
</html>Since the above code does not specify a selector to be used with the :parent selector, it defaults to * Selector is used together, so the code can set the width of the element containing text and elements to 300px in a custom animation.
The above is the detailed content of How to get the parent element of an element using the parent() method? Detailed explanation of parent() method case. For more information, please follow other related articles on the PHP Chinese website!