CODEWITHSUNDEEP
javascriptjqueryhtml
Adrian Moriconi
Adrian Moriconi

Reputation: 23

Add class to parent div for each instance of class

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.

Upvotes: 2

Views: 139

Answers (4)

gabriel garcia
gabriel garcia

Reputation: 367

Well, since all your classchange are inside mix, u could document.querySelectorAll(path) which will return u a 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.

Upvotes: 0

Pablo
Pablo

Reputation: 6058

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.

Upvotes: -1

ash.shiddiqul
ash.shiddiqul

Reputation: 11

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());
});

Upvotes: -1

CertainPerformance
CertainPerformance

Reputation: 370989

Iterate over .each of the .mixes, 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>

Upvotes: 0

Related Questions