Find element with same class

Question

I want to find element with same class as different div and add class 'active' to it. So in my example I wanna add class 'active' to '.div-top .same_class-text'.

var theClass = $('.div-bottom div').attr('class');
$('.div-top div').each(function(){
  if($(this).hasClass(theClass)) {
    $(this).addClass('active');
  }
});

.main-div, .div-top, .div-bottom {
display:flex;
}
.div-top, .div-bottom {
 width:200px;
 height:200px;
}

.div-top {
background:red;
}
.div-top div,
.div-bottom div {
 width:50px;
 height:50px;
 background:yellow;
 margin:10px;
}
.div-bottom {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
 <div class="div-top">
  <div class="different_class-text1"></div>
  <div class="different_class-tex2"></div>
  <div class="same_class-text"></div>
  <div class="different_class-text3"></div>
 </div>

 <div class="div-bottom">
  <div class="other-class same_class-text"></div>
 </div>
</div>

Answer 1

The variable theClass contains two classes: other-class and same_class-text. You can check if a<div> contains any of them and then add the class active like that:

var theClass = $('.div-bottom div').attr('class');
$('.div-top div').each(function() {
  var classes = theClass.split(" ");
  for (let i = 0; i < classes.length; i++) {
    if ($(this).hasClass(classes[i])) {
      $(this).addClass('active');
    }
  }
});

.main-div, .div-top, .div-bottom {
display:flex;
}
.div-top, .div-bottom {
 width:200px;
 height:200px;
}

.div-top {
background:red;
}
.div-top div,
.div-bottom div {
 width:50px;
 height:50px;
 background:yellow;
 margin:10px;
}
.div-bottom {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
  <div class="div-top">
    <div class="different_class-text1"></div>
    <div class="different_class-tex2"></div>
    <div class="same_class-text"></div>
    <div class="different_class-text3"></div>
  </div>

  <div class="div-bottom">
    <div class="other-class same_class-text"></div>
  </div>
</div>

Not that the class active would also be added if a <div> contains the class other-class.

Answer 2

• The DIV reference has two classes: "other-class same_class-text"
• Convert that classes to Array ["other-class", "same_class-text"] using String.prototype.trim()^MDN and String.prototype.split()^MDN
• Inside the .each() function check if the currently iterating element .contains()^MDN .some()^MDN of them in its classList^MDN
• Than having that boolean value you can use it inside .toggleClass()^{jQuery API} (or JS's classList.toggle) as the second parameter.

const theClass = $('.div-bottom div').attr('class'); // "other-class same_class-text"
const theClasses = theClass.trim().split(/\s+/);     // ["other-class", "same_class-text"]

$('.div-top div').each(function() {
  const hasSomeClass = theClasses.some(cl => this.classList.contains(cl))
  this.classList.toggle('active', hasSomeClass);
});

.main-div, .div-top, .div-bottom { display: flex; }
.div-top, .div-bottom { width: 200px;height: 200px; }
.div-top { background: red; }
.div-top div, .div-bottom div {width: 50px; height: 50px;background: yellow; margin: 10px;}
.div-bottom { background: blue; }

.active {
  outline: 5px dashed black;
}

<div class="main-div">
  <div class="div-top">
    <div class="different_class-text1"></div>
    <div class="different_class-tex2"></div>
    <div class="same_class-text"></div>
    <div class="different_class-text3"></div>
  </div>

  <div class="div-bottom">
    <div class="other-class same_class-text"></div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Get class of the div you want;

var class = document.getElementById("myDIV").className;

Set class active to divs with the same class:

$("." + class).addClass("active");