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

372
November 22, 2016, at 3:33 PM

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, '');
});
Rent Charter Buses Company
READ ALSO
jQuery Turnbox.JS - Animate without user interaction

jQuery Turnbox.JS - Animate without user interaction

I really like to use KeiichiroHirai's Turnbox. JS script (http://www.

315
How to export multiple html tables into a single excel worksheet side by side?

How to export multiple html tables into a single excel worksheet side by side?

I have searched google and seen many stackoverflow questions but they had the functions to export multiple html tables to different worksheets in the same excel file. [nnn]But what I want is to export multiple html tables to same worksheet in one excel file side by side.

488
jQuery validate plugin: hide error message and show focussed elements

jQuery validate plugin: hide error message and show focussed elements

I am using jQuery validate plugin for client side validation on my registration form. I want to hide the error message "Please enter your firstname" and show the required field in red box instead.

480
Jquery Timer with delay input as an Array

Jquery Timer with delay input as an Array

I want this jQuery timer to take the different delay every time, however it is taking the same delay each time it executes. .

407