получить номер от имени класса

Question

У меня есть секция div, которая генерируется динамически, и имя класса заканчивается номером. Я хочу получить номер из атрибута класса

Я хочу получить номер из класса submission-1 (1), submission-2 (2) и попробовал, как в фрагменте. Я поймал ошибку undefined match function. Как получить число из атрибута класса

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

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

Answer 1

Попробуйте это

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

<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 = $('[data-submission]').map(function(_,sub) {
    return $(this).data("submission");
  }).get();
  console.log(classes);
})

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

Answer 2

Почему бы вам не использовать .split ("-"). Pop (), как это, а также, если вам нужен номер из всех элементов, вам нужно будет перебрать все элементы, как этот.

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

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

Answer 3

Вы можете построить их из массива, но так как вы ищете класс submission-, который не существует, вы можете принять во внимание общий класс, который существует webform, тогда вы можете использовать метод get(), который преобразуетJQuery выбора романиста в массив и сопоставить их для извлечения индекса

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

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