Difference between jQuery parent(), parents() and closest() functions

by

from http://api.jquery.com/closest/

The .parents() and .closest() methods are similar in that they both
traverse up the DOM tree. The differences between the two, though
subtle, are significant:

.closest()

  • Begins with the current element
  • Travels up the DOM tree until it finds a match for the supplied
    selector
  • The returned jQuery object contains zero or one element

.parents()

  • Begins with the parent element
  • Travels up the DOM tree to the document’s root element, adding each
    ancestor element to a temporary collection; it then filters that
    collection based on a selector if one is supplied
  • The returned jQuery object contains zero, one, or multiple elements

.parent()

  • Given a jQuery object that represents a set of DOM elements, the
    .parent() method allows us to search through the parents of these
    elements in the DOM tree and construct a new jQuery object from the
    matching elements.

Note: The .parents() and .parent() methods are similar, except that the
latter only travels a single level up the DOM tree. Also,
$(“html”).parent() method returns a set containing document whereas
$(“html”).parents() returns an empty set.

Here are related threads:

More Related Contents:

  1. Issue with a design when content increase [closed]
  2. Why does the jquery change event not trigger when I set the value of a select using val()?
  3. How to select html nodes by ID with jquery when the id contains a dot?
  4. What does jquery $ actually return?
  5. Where has fn.toggle( handler(eventObject), handler(eventObject)…) gone?
  6. Create, read, and erase cookies with jQuery [duplicate]
  7. How to send multiple data fields via Ajax? [closed]
  8. Clone isn’t cloning select values
  9. jQuery and MooTools Conflict
  10. Codeigniter session bugging out with ajax calls
  11. Controlling the value of ‘this’ in a jQuery event
  12. Show/Hide Multiple Divs with Jquery
  13. Use ASP.NET MVC validation with jquery ajax?
  14. jQuery AJAX calls in for loop [duplicate]
  15. Can I force jQuery.css(“backgroundColor”) returns on hexadecimal format?
  16. jquery 3.0 url.indexOf error
  17. Get the value of a dropdown in jQuery
  18. Set focus on div contenteditable element
  19. jQuery serializeArray() key value pairs
  20. Load website into DIV
  21. fancy box work with iframes in beforeShow function?
  22. Differentiate between scroll up/down in jquery? [duplicate]
  23. jquery ui dialog box need to return value, when user presses button, but not working
  24. Limit bootstrap-datepicker to weekdays only?
  25. jQuery ui datepicker conflict with bootstrap datepicker
  26. Possible to get Excanvas to work in IE 8?
  27. How to make div follow scrolling smoothly with jQuery?
  28. jQuery – getting custom attribute from selected option
  29. How to hide all elements except one using jquery?
  30. How to export the Html Tables data into PDF using Jspdf

Leave a Comment