1
votes

Rechercher un élément avec la même classe

Je veux trouver un élément avec la même classe que différents div et y ajouter la classe «active». Donc, dans mon exemple, je veux ajouter la classe 'active' à '.div-top .same_class-text'.

<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>

.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;
}

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

jquery html css

1 commentaires

Mais votre DIV du bas a deux classes! Maintenant, tout dépend de la logique que vous voulez: 1. soit une 2. une spécifique. ?

3 Réponses :

-1
votes

Obtenez la classe du div que vous voulez;

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

Définissez la classe active sur les divs de la même classe:

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

0 commentaires

1
votes

La variable theClass contient deux classes: other-class et same_class-text . Vous pouvez vérifier si un

  en contient, puis ajouter la classe  active  comme ça:  
 

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

  Non pas que la classe  active  serait également ajoutée si un 
  contient la classe  other-class .

1 commentaires

Merci! Ça a marché.

1
votes

La référence DIV a deux classes: "other-class same_class-text"
Convertissez ces classes en Array ["other-class", "same_class-text"] en utilisant String.prototype.trim () ^MDN et String.prototype.split () ^MDN
Dans la fonction .each () , vérifiez si l'élément en cours d'itération .contains () ^MDN .some () ^MDN d'entre eux dans son classList ^MDN a >
En plus d'avoir cette valeur booléenne, vous pouvez l'utiliser dans .toggleClass () jQuery API (ou classList.toggle de JS) comme deuxième paramètre.

<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>

.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;
}

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

1 commentaires

Merci pour votre réponse!