JQuery Find Parent Element

JQuery Find Parent Element

Jquery access parent element. You may come across the situation where you need to access the parent element of current selected element or clicked html control. This is very simple with the help of Jquery. Here we are having button inside a Div control. Div control has text and button control.

We will attach click event to the button control and get the text written inside a div control.

$(this).parent() Method gives the parent control of current element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready( function (){ 

    $("#Button1").click(function(){
    
    var parentElement = $(this).parent();
    
    alert(parentElement.text());
    
    });
    
 });

</script>

HTML code.

<div>
           <p>
               <div>
                   This text written in parent element of button control.
                   <input id="Button1" type="button" value="Get My Parent Element." />
               </div>
           </p>
       </div>

You can also get parent’s parent element or next element of current element by calling parent() or next() method on current element in context.

Summery: We saw how to access the parent control of current element using Jquery. You can use Google CDN hosted Jquery scripts.

If you have any other control inside the parent element, you can easily get it by calling find() method on parent element.

Tags:

Basics of jqueryLearning JqueryJQuery Get .next() ElementJQuery Add ElementJQuery Get Element By ID or class name or tag nameJQuery Hide HTML ElementjQuery Select element by class nameJquery Trim StringJQuery SlideJQuery Animate Div Height and WidthHow to get Jquery selected option

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.