jQuery parent selectot
.parent() selector travels upwards locating the parent of the current tag.The following example illustrate its usage
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
</head>
<body>
<div><p>Reference Designer Para 1</p></div>
<div class="selected"><p>Reference Designer Para 2</p></div>
<script>$("p").parent(".selected").css("background", "pink");</script>
</body>
</html> |
Notice that only the para 2 has been highlighted and not the para 1.
You may like to try this example here.
As a practical example uase, if you need to hover to the <a> tags and want to perform an action on the <div> tag (for example, add a border or background color to the div. In this case, you would use .parent() to locate the div and apply an action to it. You will need to know onmouse event. We will cover this topic again when we read about jQuery events.