How to add class to a parent from child element text value? jQuery

Question

I have a list that has child elements inside it. I want to add the value of .post-meta-boxcolor to the parent li

<ul class="course-list">
    <li>

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">orange</p>
     </div>

    </li>

    <li>

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">red</p>
     </div>

    </li>

    <li>

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">lightblue</p>
     </div>

    </li>


</ul>

How can i add class to the parent li based on class="post-meta-boxcolor" text or value.

The result that I want is this:

<ul class="course-list">
    <li class="orange">

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">orange</p>
     </div>

    </li>

    <li class="red">

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">red</p>
     </div>

    </li>

    <li class="lightblue">

     <div class="course-content">
      <p class="post-meta post-meta-level">Level 2</p>
      <p class="post-meta post-meta-boxcolor">lightblue</p>
     </div>

    </li>


</ul>

Thanks for your help!

Answer 1

You can use the addClass method with a callback as argument like

 $('.course-list li').addClass(function() { return $(this).find('.post-meta-boxcolor').text() }) 

 .orange { color: orange; } .red { color: red; } .lightblue { color: lightblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="course-list"> <li> <div class="course-content"> <p class="post-meta post-meta-level">Level 2</p> <p class="post-meta post-meta-boxcolor">orange</p> </div> </li> <li> <div class="course-content"> <p class="post-meta post-meta-level">Level 2</p> <p class="post-meta post-meta-boxcolor">red</p> </div> </li> <li> <div class="course-content"> <p class="post-meta post-meta-level">Level 2</p> <p class="post-meta post-meta-boxcolor">lightblue</p> </div> </li> </ul> 

Answer 2

You can use:

$('.course-list li').addClass(function(){
     return $(this).find('.post-meta-boxcolor').text().replace(/\s/g, '');
});