從 class 名稱中獲取編號

Question

我有動態生成的 div 部分，其中 class 名稱以數字結尾。我想從 class 屬性中獲取數字

我想從 class submit-1 (1),submission-2 (2) 中獲取號碼並嘗試在代碼片段中。我發現錯誤未定義匹配 function.how to get the number from ZA2F2ED4F8EBC2CBB4C21A29DC0 attribute

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

您可以從數組中構造它們，但由於您正在尋找 class submission- - 不存在您可以考慮一個常見的 class 存在webform ，然后您可以使用方法get()將 ZF590B4FDA2C30BE28DD3C8C3BZCAF5 轉換為數組選擇和 map 他們提取索引

 $(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() 像這樣，如果你需要所有元素的數字，那么你需要像這樣遍歷所有元素。

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