We can use the jQuery parent method to get the parent element(div) of the selected div.
$("#p1").parent();
Let’s say we have the following HTML:
<div id="top-div">
<div>
<p>This is paragraph one.</p>
</div>
<div>
<p class="p2">This is paragraph two.</p>
</div>
<div>
<p>This is paragraph three.</p>
</div>
</div>
If we want to change the background color of only the div that contains paragraph two, we can use the jQuery parent() method along with the css() method.
$(".p2").parent().css("background", "green");
If you are using WordPress, don’t forget to change the $ to jQuery as below:
jQuery(".p2").parent().css("background", "green");
Using the jQuery parent Method to Get and Change the Parent Div
In this example, we will get the parent of any div with a paragraph in it and change its background color. We will also add some simple styles to the divs.
Here is the simple HTML setup.
<style>.divs { float: left; width: 120px; height: 120px; padding: 10px; background: #ddd; margin-bottom: 10px; margin-right: 10px; }</style>
<div id="top-div">
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
</div>
<div class="clear"></div>
<div id="click-me">Change background</div>
We will utilize the jQuery click(), css(), and parent() methods to change the background color of any div with a paragraph in it when the button is clicked. In our function, we will generate a random color and then apply that color as the background to the div. Evertime the user clicks to change the background, a new color should appear.
Here is the JavaScript code:
$("#click-me").click(function(){
//Create a random color
var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
$("#top-div p").parent().css("background", randomColor);
});
The final code and output for this example of using the jQuery parent method to get and change the parent div:
Code Output:
This is some text.
This is some text.
This is some text.
Full Code:
<style>.divs { float: left; width: 120px; height: 120px; padding: 10px; background: #ddd; margin-bottom: 10px; margin-right: 10px; }</style>
<div id="top-div">
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
<div class="divs">
<p>This is some text.</p>
</div>
<div class="divs"></div>
<div class="divs"></div>
</div>
<div class="clear"></div>
<div id="click-me">Change background</div>
<script>
$("#click-me").click(function(){
//Create a random color
var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));
$("#top-div p").parent().css("background", randomColor);
});
</script>
Hopefully this article has been useful for you to understand how to use the jQuery parent method.
Leave a Reply