How can I separate the number form a string in an id of a div an turn the string into a variable?

Question

So I want to get the last Id of a div and then convert it into a variable

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

So I know you can get the last id in a div with:

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

Which returns "rowNum6" so my question is how can I grab just the number 6 and put it into a var like var row1Num in Jquery?

this is shorter `var id = document.querySelectorAll("[id^='rowNum']").length;` — Emeeus, Aug 28 '18 at 17:57

Luca Kiebel · Accepted Answer · 2018-08-30T09:44:19.757

1

You can use a simple regex that matches numbers for this:

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>

edited Aug 30 '18 at 09:44

answered Aug 28 '18 at 17:26

Luca Kiebel

9,790
7
29
44

1

Thanks this works perfectly and it's so elegant. – Rafael Tamayo Aug 28 '18 at 17:43
Thanks :-) It really is – Luca Kiebel Aug 28 '18 at 17:45

score 0 · Answer 2 · answered Aug 28 '18 at 17:26

You could use split() like :

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>

score 0 · Answer 3 · answered Aug 28 '18 at 17:29

You can use regex to split the id by number

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>

score -1 · Answer 4 · answered Aug 28 '18 at 17:25

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>

How can I separate the number form a string in an id of a div an turn the string into a variable?

4 Answers4