如何从子元素文本值向父类添加类？jQuery

Question

我有一个包含子元素的列表。我想将. parent boxcolor的值添加到父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>

如何根据class=的“后元盒颜色”文本或值向父li添加类。

我想要的结果是：

<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, '');
});