YumJS parents() Documentation


The parents() method acts on all the parents and grandparents (all ancestors) of elements you pass in to Yum. Not to be confused with the parent() method (bottom of this page) that acts only on the direct parent.

Optional function as first parameter and optional selector to match as second parameter can be passed in to parents() for further functionality or filtering.

Consider the parents() code examples below:

* Note: Although the code below is using a selector (.button) it is recommended to pass in a reference to an element if you know you will be performing actions on it more than once. This helps reduce dives / querying into the DOM. Read more here

const fn = function(e){
yum(e).css('color: green;'); or e.style.color = 'green';

// Execute fn for all parents (including grandparents)


// Same as above chained with a CSS function

yum('.button').parents(fn).css('color: blue');

// Execute fn for all parents that match selector '.box'

yum('.button').parents(fn, '.box');

// No function to run, CSS changes parents text color to blue is matches '.box' selector

yum('.button').parents(false, '.box').css('color': blue;'); 

// Turn all of .buttons parents text to blue

yum('.button').parents().css('color': blue;'); 


parent() method code example

// Only the direct parent of .button will be affected

yum('.button').parent().css('color: red;');

Questions? Contact me.