2
votes

Comment obtenir le nom spécifique d'un élément en fonction de la position de l'attribut dans la classe

J'utilise ce code pour obtenir le nom spécifique de chaque classe à l'intérieur d'un élément en fonction de leur position d'attribut dans la liste d'attributs de classe

Par exemple, si je veux obtenir la deuxième classe à l'intérieur du nom div

Ce code renvoie tous les noms de classes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cl1 cl2 cl3" id="banner-message"></div>

mais je n'ai besoin que du second!

#banner-message {
  background: #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

$("#banner-message").on('click', function(){
  var FirstclassName = $(this).attr('class');
  // var SecondclassName = $(this).attr('class');
  // var ThirdclassName = $(this).attr('class');
  console.log(FirstclassName);
});

 var SecondclassName = $(this).attr('class');

javascript jquery html css

0 commentaires

4 Réponses :

2
votes

La classList est une DOMTokenList, qui est un tableau semblable à une construction, sur l'élément qui contient toutes les classes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cl1 cl2 cl3" id="banner-message"></div>

#banner-message {
  background: #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

$("#banner-message").on('click', function(){
  console.log(this.classList[1]);
});

2 commentaires

C'est la manière vanille, mais il n'est pas nécessaire d'avoir une manière jQuery. Afaik, cela fonctionne dans tous les navigateurs.

caniuse.com/#search=classList La prise en charge de classList existe depuis longtemps. Vous devrez être dans un navigateur très ancien pour que cela ne fonctionne pas.

3
votes

JavaScript a une propriété intégrée sur tous les éléments classList - puisque vous voulez le second, utilisez [1] . Utilisez la déstructuration pour obtenir les trois:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cl1 cl2 cl3" id="banner-message"></div>

#banner-message {
  background: #ccc;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

$("#banner-message").on('click', function(){
  var [FirstclassName, SecondclassName, ThirdclassName] = this.classList;
  console.log(FirstclassName);
  console.log(SecondclassName);
  console.log(ThirdclassName);
  var second = this.classList[1];
  console.log(second);
});

0 commentaires

0
votes

Vous pouvez également diviser le résultat obtenu avec attr () et adresser chaque élément par son index comme ceci:

$("#banner-message").on('click', function(){
  var array = $(this).attr('class').split(' ');
  var FirstclassName = array[0]
  // var SecondclassName = array[1];
  // var ThirdclassName = array[2];
  console.log(FirstclassName);
});

mais il est conseillé d'utiliser classList car il vous fournit déjà le tableau

0 commentaires

0
votes

Vous souhaitez utiliser la propriété classList qui renvoie le (s) nom (s) de classe d'un élément.

<div id="myDiv" class="first second third">
</div>

console.log(document.getElementById("myDiv").classList[1]);

renverra "second".

0 commentaires