How to Get the Number from an Element’s ID using jQuery replace() Method Example

Here I am sharing a simple tip on how to get the number from an HTML element’s ID using jQuery. The element that you use can be a DIV or an input box. Now, sometimes we might add numbers to the element’s id to make the ids look unique. You can have other reasons too.

Get the number from element's ID using jQuery .replace() method

Let us assume, I have dynamically created few DIV elements, using either a server side script or JavaScript, and each element has a unique id, prefixed with a number sequence. I wish to get the number (only) from each element’s id, when clicked.

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <div id="div1">
        Contents in DIV1
    </div>
    <div id="div2">
        Contents in DIV2
    </div>
</body>
The Script
<script>
    $(document).ready(function () {
        $('div').click(function () {
            var i = $(this).attr('id').replace('div', '');
            console.log(i);
        });
    });
</script>

In the above script, I am using two different methods to extract the number from each element. The first method is .attr(), which takes a parameter as id. The second method is .replace(), which takes two parameters, that is, the string value we want to replace followed by the value to replace.

The second parameter in the “.replace()” is blank. This gives us the number replacing the value div.

Check this demo

Click the DIVs to get the number from its ID.

Contents in DIV1

Contents in DIV2

Second Example

Here’s another example. This might be useful tool. I have a table. Each row has an Input box (textbox), and two DIV elements. Each element has a unique id prefixed by a number. The first field (input box) with accept a number as Quantity. The second is DIV element, which has a predefined value as Price. Once I enter value in the “Quantity” field, my jQuery script will calculate Quantity and Price and show the total in the last DIV element of the row.

The Markup
<body>
    <style>
        div {
            display:inline-table;
            margin:2px 5px;
            border:solid 1px #f9f9f9;
            padding:10px;
            float:left;
        }
        input {
            width:100px;
        }
    </style>
    <div>
        <div><input placeholder="Qty." id="qty1" /></div>
            <div id="price1">2000</div>
            <div id="total1"></div><br />
        <div><input placeholder="Qty." id="qty2" /></div>
            <div id="price2">1600</div>
            <div id="total2"></div><br />
        <div><input placeholder="Qty." id="qty3" /></div>
            <div id="price3">2100</div>
            <div id="total3"></div>
    </div>
</body>
The Script
<script>
    $(document).ready(function () {
        $('input').keyup(function () {
            var i = $(this).attr('id').replace(/qty/, '');

            if ($(this).val() != "") {
                var p = $('#price' + i).text();
                $('#total' + i).text($(this).val() * parseInt(p));
            }
        });
    });
</script>

Check this demo

Enter a number in the first (Quantity) field. It will calculate Qantity multiplied by Price and show the Total Amount.

x
2000

x
1600

x
2100

Well that’s it. I am sure these two examples will help you in some way.

Thanks for reading.

Previous - How to Dynamically Unselect or Clear all Selected Values in an Input Box using jQuery Select2Next - How to Check if Checkbox is Checked or Not using jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!