Wednesday, 17 October 2012

Difference between parent and parents in jquery

parent()

The parent() function travels only one level up in the DOM tree. So parent() will select the first parent element.

parents()

The parents() function travels up the DOM tree till the document's root element.

Note: We can also use filter with these function.

CODE
<!DOCTYPE html>
<html>
<head>
  <title>jQuery With Example</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $(".btnGetLength").click(function () {
        alert($(".lblName").parent().length);
        alert($(".lblName").parents().length);
      });

      $(".btnSearch").click(function () {
        alert($(".lblName").parents().find("#dvTwo").text());
        alert($(".lblName").parents('body').find(".btnGetLength").val());
      });
    });
  </script>
</head>
<body>
  <div class="Container">
    <div id="dvOne">
      <div id="dvTwo">Ram</div>
      <div id="dvThree">
        <span class="lblName">Mohan</span>
      </div>
    </div>
    <input type="button" class="btnGetLength" value="GetLength" /><br /><br />
    <input type="button" class="btnSearch" value="Search" />
  </div>
</body>
</html>
DISPLAY
Ram
Mohan


No comments :

Please Give Your Feedback