1
votes

obtenir le numéro du nom de la classe

J'ai la section div qui est générée dynamiquement dont le nom de classe se termine par number Je veux obtenir le numéro de l'attribut class

Je veux obtenir le numéro de la classe soumission-1 (1), soumission -2 (2) et essayé comme dans l'extrait de code.J'ai attrapé l'erreur undefined match function.how pour obtenir le numéro de l'attribut de classe

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform submission-2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform submission-3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform submission-4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>

<div class="webform submission-12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

$(document).ready(function(){
  var num = $('.submission-').attr('class').match(/\d+$/)[0];
  console.log(num);
});

javascript jquery html

5 commentaires

Une approche pourrait être d'obtenir le nom de la classe et de diviser la chaîne avec '-' comme délimiteur

sélectionnez l'élément par le nom de classe existant `var num = $ ('. webform'). attr ('class'). match (/ \ d + $ /) [0];`

Pouvez-vous nous indiquer clairement le résultat attendu?

si j'étais vous, j'irai avec l'attribut data-val pour stocker les nombres au lieu d'ajouter le nom de la classe.

@Miller Je suis d'accord. J'ai posté un exemple supplémentaire en utilisant data-attr

3 Réponses :

0
votes

Vous pouvez les construire à partir du tableau mais comme vous recherchez une classe soumission- qui n'existe pas, vous pouvez prendre en compte une classe commune qui existe webform alors vous pouvez utiliser la méthode get () qui convertit le romancier de sélection jQuery en un tableau et les mappe pour extraire l'index

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
  <span class="first">1</span>
  <span class="second">11</span>
</div>
<div class="webform submission-2">
  <span class="first">2</span>
  <span class="second">22</span>
</div>
<div class="webform submission-3">
  <span class="first">3</span>
  <span class="second">33</span>
</div>
<div class="webform submission-4">
  <span class="first">4</span>
  <span class="second">44</span>
</div>

<div class="webform submission-12">
  <span class="first">12</span>
  <span class="second">1212</span>
</div>

$(document).ready(function() {
  var indexArray = $('.webform').get().map(element => +element.classList.toString().match(/\d+$/)[0]);
  console.log(indexArray);
});

0 commentaires

3
votes

Essayez ceci

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform" data-submission="2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform" data-submission="3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform" data-submission="4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>

<div class="webform" data-submission="12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

$(document).ready(function(){
  var classes = $('[data-submission]').map(function(_,sub) {
    return $(this).data("submission");
  }).get();
  console.log(classes);
})

Recommandation - utilisez plutôt des attributs de données si vous pouvez modifier le code du serveur:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform submission-2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform submission-3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform submission-4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>

<div class="webform submission-12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

$(document).ready(function(){
  var classes = $('[class*=submission]').map(function(_,cl) {
    return cl.className.split(" ")[1].split("-")[1]; // or just cl.className.split("-")[1]; 
  }).get();
  console.log(classes);
})

0 commentaires

0
votes

Pourquoi n'utilisez-vous pas .split ("-"). pop () comme ceci et aussi si vous avez besoin d'un nombre de tous les éléments, vous devrez parcourir tous les éléments comme celui-ci.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform submission-2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform submission-3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform submission-4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>

<div class="webform submission-12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

$(document).ready(function(){
  var num = [];
  $("div[class*=' submission-']").each(function(){
  	num.push($(this).attr('class').split("-").pop());
  });
  console.log(num);
});

0 commentaires