如何将数字与 div 的 id 中的字符串分开并将字符串转换为变量？ [复制]

Posted 2023-05-07

【中文标题】如何将数字与 div 的 id 中的字符串分开并将字符串转换为变量？ [复制]

【英文标题】：How can I separate the number form a string in an id of a div an turn the string into a variable? [duplicate]

【发布时间】：2019-02-03 09:51:48

【问题描述】：

所以我想得到一个div的最后一个id，然后把它转换成一个变量

<div class="margin_bot" id="itemRows2"> 
  <p id="rowNum1">...</p>
  <p id="rowNum2">...</p>
  <p id="rowNum3">...</p>
  <p id="rowNum4">...</p>
  <p id="rowNum5">...</p>
  <p id="rowNum6">...</p>
</div>

所以我知道您可以通过以下方式获取 div 中的最后一个 id：

$('#itemRows2').children().last().attr('id');

返回"rowNum6" 所以我的问题是我如何才能抓住数字6 并将其放入像Jquery 中的var row1Num 这样的变量中？

【问题讨论】：

这个更短 var id = document.querySelectorAll("[id^='rowNum']").length;

【参考方案1】：

您可以为此使用匹配数字的简单正则表达式：

let id = $('#itemRows2').children().last().attr('id');

let num = Number(id.match(/\d+/));

console.log(num)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="itemRows2"> 
  <p id="rowNum1">...</p>
  <p id="rowNum2">...</p>
  <p id="rowNum3">...</p>
  <p id="rowNum4">...</p>
  <p id="rowNum5">...</p>
  <p id="rowNum6">...</p>
</div>

【讨论】：

感谢这个完美的作品，它是如此优雅。

谢谢 :-) 真的是

【参考方案2】：

您可以使用 split() 之类的：

var myId = $('#itemRows2').children().last().attr('id');
var myNumber = myId.split('rowNum')[1];

console.log(myNumber);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin_bot" id="itemRows2">
  <p id="rowNum1">...</p>
  <p id="rowNum2">...</p>
  <p id="rowNum3">...</p>
  <p id="rowNum4">...</p>
  <p id="rowNum5">...</p>
  <p id="rowNum6">...</p>
</div>

【参考方案3】：

您可以使用正则表达式按数字拆分 id

let m = $('#itemRows2').children().last().attr('id').trim().split(/(\d+)/)[1]
console.log(m)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin_bot" id="itemRows2">
  <p id="rowNum1">...</p>
  <p id="rowNum2">...</p>
  <p id="rowNum3">...</p>
  <p id="rowNum4">...</p>
  <p id="rowNum5">...</p>
  <p id="rowNum6">...</p>
</div>

【参考方案4】：

var text = $('#itemRows2').children().last().attr('id');

console.log(text.match(/\d/g)[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="margin_bot" id="itemRows2">
  <p id="rowNum1">...</p>
  <p id="rowNum2">...</p>
  <p id="rowNum3">...</p>
  <p id="rowNum4">...</p>
  <p id="rowNum5">...</p>
  <p id="rowNum6">...</p>
</div>