JavaScript closest

In the case of discovering relationships between parts, we historically consider a top-down method. We will thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we need to discover a component’s dad or mum primarily based on selector?

To look up the aspect tree and discover a dad or mum by selector, you need to use HTMLElement‘s closest methodology:

// Our pattern aspect is an "a" tag that matches ul > li > a
const hyperlink = doc.querySelector('li a');
const checklist = a.closest('ul');

closest seems up the ancestor chain to discover a matching dad or mum aspect — the alternative of conventional CSS selectors. You’ll be able to present closest a easy or complicated selector to look upward for!

  • Interview with a Pornhub Web Developer
  • Write Simple, Elegant and Maintainable Media Queries with Sass
  • Record Text Selections Using MooTools or jQuery AJAX

    Report Textual content Picks Utilizing MooTools or jQuery AJAX

    One method I am seeing an increasing number of lately (, for instance) is AJAX recording of chosen textual content. It is smart — in the event you detect customers choosing the phrases over and over, you possibly can in all probability assume your guests are looking out that time period on Google…

  • CSS Ellipsis Beginning of String

    CSS Ellipsis Starting of String

    I used to be extremely blissful when CSS text-overflow: ellipsis (married with mounted width and overflow: hidden was launched to the CSS spec and browsers; the characteristic allowed us to cease making an attempt to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was additionally very pleasant to…

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also
Back to top button