从类名中获取编号

Question

我有一个动态生成的div部分，类名以number结尾。我想从class属性中获取数字

我想要从类caught 1 (1)，caught 2 (2)中获取数字，并像在代码片段中那样尝试。我捕获了错误undefined match function.how，以便从类属性中获取数字

​

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

您可以从数组构造它们，但是由于您正在寻找一个不存在的类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>

​

Answer 3

为什么不像这样使用.split("-").pop()，而且如果你需要所有元素的number，那么你需要像这样遍历所有元素。

​

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

​