title: Jquery add a class to all the parents in the hierarchy
body: <p>I have a parent/child hierarchy with child have dynamic length. Which means a child node can be parent of another node etc.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;ul class="tree"&gt;
  &lt;li id="8587509197182534205xy9w" class="has-children showChildren"&gt;
      &lt;i class="fi-minus"&gt;&lt;/i&gt;
  
      &lt;div class="checkboxFive"&gt;
          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w"&gt;
          &lt;label for="t_8587509197182534205xy9w"&gt;&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;span class="text"&gt;Sand&lt;/span&gt;
  
      &lt;ul class="child"&gt;
          &lt;li id="8587509198220874655a1s8" class="has-children showChildren"&gt;
              &lt;i class="fi-minus"&gt;&lt;/i&gt;
  
  
              &lt;div class="checkboxFive"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8"&gt;
                  &lt;label for="t_8587509198220874655a1s8"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;span class="text"&gt;Fyllgrus&lt;/span&gt;
              &lt;ul class="child"&gt;
                  &lt;li id="8587496924061602638qkdo"&gt;
                      &lt;div class="checkboxFive"&gt;
                          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo"&gt;
                          &lt;label for="t_8587496924061602638qkdo"&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;span class="text"&gt;sub sub&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/li&gt;
          &lt;li id="8587509198127281697em9f"&gt;
              &lt;div class="checkboxFive"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198127281697em9f" value="8587509198127281697em9f"&gt;
                  &lt;label for="t_8587509198127281697em9f"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;span class="text"&gt;Siltholdig&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  
  &lt;li id="8587509197183114344b5l4" class="has-children"&gt;
      &lt;i class="fi-plus"&gt;&lt;/i&gt;
      &lt;div class="checkboxFive"&gt;
          &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197183114344b5l4" value="8587509197183114344b5l4"&gt;
          &lt;label for="t_8587509197183114344b5l4"&gt;&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;span class="text"&gt;Leire&lt;/span&gt;
      &lt;ul class="child"&gt;
          &lt;li id="85875091985832885997g4j"&gt;
              &lt;div class="checkboxFive"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_85875091985832885997g4j" value="85875091985832885997g4j"&gt;
                  &lt;label for="t_85875091985832885997g4j"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;span class="text"&gt;Bløt&lt;/span&gt;
          &lt;/li&gt;
          &lt;li id="858750919842507621898j6"&gt;
              &lt;div class="checkboxFive"&gt;
                  &lt;input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_858750919842507621898j6" value="858750919842507621898j6"&gt;
                  &lt;label for="t_858750919842507621898j6"&gt;&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;span class="text"&gt;Tørr&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p> </p>
  
  <p>What I am trying to achieve is whenever a child node is selected, it goes up until the root and select all the parents in the hierarchy. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/zTLrq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zTLrq.png" alt="enter image description here"></a></p>
  
  <p>So when I select sub sub in the image the parents are selected as well. I have a class which designs the parent checked checkboxes. I want to add that class to all the parent div with class 'checkboxFive'. Is there an easy way in jquery to do that or I would have to add it using recursion?</p>