Как добавить класс к родительскому элементу из текстового значения дочернего элемента? jQuery

Question

У меня есть список, в котором есть дочерние элементы. Я хочу, чтобы добавить значение .POST-мета-boxcolor к родительскому литий

<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> 

Как я могу добавить класс к родительскому Ли на основе класса = «пост-мета-boxcolor» текст или значение.

В результате, что я хочу это:

<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> 

Спасибо за вашу помощь!

Answer 1

Вы можете использовать метод addClass с обратного вызова в качестве аргумента, как

$('.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

Вы можете использовать:

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