Hitta specifik förfader med rekursion

Om man är i behov att manipulera ett element som är flera led ovanför elementet man har tillgång till så kan man använda sig utav en rekursiv funktion för att hitta rätt.

type FuncType = (element: HTMLElement, parentClass: string) => HTMLElement | null

const findParentByClass: FuncType = (element, parentClass) => {
  const parent = element.parentElement
  if (!parent || parent.tagName === "Body") return null
  if (parent.className.includes(parentClass)) return parent
  return findParentByClass(parent, parentClass)
}

// Exempel
const startingPoint = document.querySelector("#item1")
findParentsByClass(startingPoint, "gallery")

• Som svar får man ett HTMLElement som innehåller del av klassnamnet - eller - null.
• Den stannar av sökandet om den känner av Body-elementet.
• Fungerar även med SCSS som döper om till unika klasser, eftersom kärnan av klassnamnet ändå är kvar.

---

3 januari 2023