为类的每个实例将类添加到父div

Question

I have a wrapper div called container and inside that container div I have multiple instances of a div called mix. Inside each mix there is a class called changeclass with a text value. I need to add the text value of each changeclass div to its parent mix div as a class.

Here is my HTML.

<div class="mix">
  <div class="classchange">
    <p>active</p>
    <div class="text"></div>
  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active2</p>
    <div class="text"></div>
  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active3</p>

  </div>
</div>
  <div class="mix">
  <div class="classchange">
    <p>active4</p>
    <div class="text"></div>
  </div>
</div>

So far in my research, I have been able to add the class the parent div of one but not each individual instance of this.

I've been using this

var str = $( ".classchange" ).text();
$( ".classchange" ).parent().addClass( str );

But I'm not sure how to add .each function to it to make it work.

Answer 1

Iterate over .each of the .mix es, selecting the text in each one's classchange and calling addClass on the .mix with that text:

 $('.mix').each(function() { $(this).addClass( $(this).find('p').text() ); }); console.log(document.body.innerHTML); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mix"> <div class="classchange"> <p>active</p> <div class="text"></div> </div> </div> <div class="mix"> <div class="classchange"> <p>active2</p> <div class="text"></div> </div> </div> <div class="mix"> <div class="classchange"> <p>active3</p> </div> </div> <div class="mix"> <div class="classchange"> <p>active4</p> <div class="text"></div> </div> </div> 

Answer 2

Well, since all your classchange are inside mix , u could document.querySelectorAll(path) which will return ua NodeList .

Then, u could convert it to an array data structure and apply map or forEach operations on them, where u could work with each classChange node and it's parent/s.

This is what I would do in ES6, not sure about JQuery but I'll let this here in case it helps at all.

Answer 3

So, you want to add the new class to each .mix element right?

If so, then we could iterate on each .classchange element and add the new class from there. Like so:

$('.classchange').each(function() {
  $(this).parent('.mix').addClass($(this).text());
});

Answer 4

To better control the behavior of each matching element use the $.each() function to loop over the target elements and control the DOM manipulation of each parent .mix individually:

 // Loop through all .classchange div $('.classchange').each(function() { // Select closest .mix div add add new class based on current target text $(this).closest('.mix').addClass($(this).text()); }); 

 .active { color: red; } .active2 { color: hotpink; } .active3 { color: purple; } .active4 { color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mix"> <div class="classchange"> <p>active</p> <div class="text"></div> </div> </div> <div class="mix"> <div class="classchange"> <p>active2</p> <div class="text"></div> </div> </div> <div class="mix"> <div class="classchange"> <p>active3</p> </div> </div> <div class="mix"> <div class="classchange"> <p>active4</p> <div class="text"></div> </div> </div> 

Your code was basically adding all 4 active classes to all .mix divs.