Difference between parents and closest in jquery

Basically both methods used to find the element and both traverse up the DOM tree.

closest()

1. It start searches from the current element.
2. This method travels up the DOM tree until it finds an element which match for the supplied selector.
3. It may return return zero or one element

parents()

1. It start searches from the parrent element.
2. This method travels up the DOM tree and return all the element which match for the supplied selector.
3. It may return return zero, one or multiple element
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 () {
      $(".btnClosest").click(function () {
        $(this).closest('.dvTest').each(function () {
          alert('Closest: ' + $(this).html());
        });
      });

      $(".btnParents").click(function () {
        $(this).parents('.dvTest').each(function () {
          alert('Parents: ' + $(this).html());
        });
      });
    });
  </script>
</head>
<body>
  <div class="Container">
    <div class="dvTest">
      <div class="dvTest">
        <p>Click both button</p>
         <input type="button" class="btnClosest Button" value="Closest" /><br /><br />
         <input type="button" class="btnParents Button" value="Parents" />
      </div>
    </div>
  </div>
</body>
</html>
DISPLAY

Click both button



1 comment :

  1. It's actually a nice and useful piece of info. I'm
    happy that you simply shared this helpful info with us.
    Please keep us up to date like this. Thank you for sharing.

    ReplyDelete