parent method in jQuery with examples

Home » JQuery » jQuery Methods » parent method in jQuery with examples

parent method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. parent() method gets the parent of each element in the current set of matched elements.
2. Given the jquery object, parent() method allows us to search the parent of each element in the current jQuery object for matched elements, to construct new jQuery object.
3. parent() and parents() method are same, only difference is parent() method only searches to one level up the DOM tree.

Example 1 :

        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#parent").click(function () {
                    $("#target").parent().css(css);
                });
                $("#parents").click(function () {
                    $("#target").parents().css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em id="target">This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="parent" value = "parent() of em" />
        <input type="button" id="parents" value = "parents() of em" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body> 
        </html>

Demo :

In the above example, we have demonstrated working of parent() and parents(). Our target element is em. On click of "parent() of em" button only immediate parent of em element is selected and CSS is applied to it. On click of "parents() of em", all the parents in the DOM tree for em element is selected and CSS is applied to it.
This shows that parent() method travels only one level up the DOM tree and parents() searches parent at multiple hierarchy in the DOM tree.

Example 2 : parents() with Selector

        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#parent").click(function () {
                    $("#target").parents().css(css);
                });
                $("#parents").click(function () {
                    $("#target").parents("div").css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em id="target">This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="parent" value = "parents() of em" />
        <input type="button" id="parents" value = "parents() of em filter by selector" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body> 
        </html>

Demo :

In the above example, we have demonstrated working of parents() and parents(selector) method. On click on "parents() of em" button, all the parents() in the DOM tree for em element is selected and CSS is applied to it.
But on click on "parents() of em filter bu selector" button we are selecting all the parents() in the DOM tree and then filtering it by selector i.e "div". So only parents which are div are selected in new jQuery object and CSS is applied to them.

Example 3 :

        <html>
        <head>
        <title>parent</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var css = {
                    'color': 'Aqua',
                    'background-color': 'Yellow'
                };
                $("#divParent").click(function () {
                    $("div").parent().css(css);
                });
                $("#divP").click(function () {
                    $("p").parent().css(css);
                });
                $("#divSpan").click(function () {
                    $("span").parent().css(css);
                });
                $("#divEm").click(function () {
                    $("em").parent().css(css);
                });
            });
        </script>
        </head>
        <body>
        <div>
        This is Div element.
        <p>This is paragraph element. It is inside Div element.<br>
        <span>This is span element. It is inside paragraph element.<br>
        <em>This is emphasize element. It is inside span element.</em>
        </span>
        </p>
        </div>
        <input type="button" id="divParent" value="Parent of Div" />
        <input type="button" id="divP" value="Parent of P" />
        <input type="button" id="divSpan" value="Parent of Span" />
        <input type="button" id="divEm" value="Parent of EM" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>

Demo :

In the above example, we have nested elements inside a div element and created corressponding buttons for each element. On click of each button we are selecting the parent of that respective element and applying CSS to it.