如何從子元素文本值添加類到父項？ 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, ''); 
});