CODEWITHSUNDEEP
javascriptjquery
Doug
Doug

Reputation: 1890

Retrieve only the Number from an ID field

Suppose I have a list like this:

<ul id="items">
   <li id="item_1_dish">Item 1</li>
   <li id="item_2_dish">Item 2</li>
   <li id="item_3_dish">Item 3</li>
</ul>

I need to retrieve only the number from the ID. Up till now I have being using the following:

function getNum(element, attrPrefix){
    //set prefix, get number
      var prefix = attrPrefix;
      var num = element.attr("id").substring((prefix.length));
      return num;
}

function updateDish(field) {
      var num = getNum($(field), "item_");
     //Rest of function ...
     console.log("Number = " + num);// 1_dish, 2_dish, 3_dish
}

How ever this return's 1_dish, 2_dish, 3_dish etc.

I thought using this:

function getNum() {
    var num = /\d+(?=\D*$)/.exec($("element").attr('id'));
    return num;
}

function updateDish(field) {
      var num = getNum($(field), "item_");
     //Rest of function ...
     console.log("Number = " + num); //null
}

Would return what I needed after reading this post: Jquery: Getting the number from ID , unfortunatly I get 'null' back instead of the number I require.

My ID's actually look like "_bc_inventorybundle_menu_product_0_dish" I just shortened them for example purposes.

Thank's to all the quick replies. I went with the accepted answer as it was closest to what I already had.

Upvotes: 2

Views: 1975

Answers (6)

Strahinja Djurić
Strahinja Djurić

Reputation: 404

You can achiev this by exploding you ID string to array with .split() method. For example:

$(".items > li").each(function() { 
     number = $(this).attr("id").split("_"); // ex: number = ["item","1","dish"];

     return number[1]; // you get number from array since its index is 1
}

Upvotes: 3

Drew Noakes
Drew Noakes

Reputation: 311375

Rather than parsing the string, can you use a data attribute?

<li id="item_1_dish" data-id="1">Item 1</li>

Then to access it if element is a jQuery object:

var id = parseInt($element.data('id'));

or if element is an HTMLElement:

var id = parseInt(element.dataset.id);

Upvotes: 4

Matthew
Matthew

Reputation: 4339

If the id's are always formatted like that, then just split them on the _ character and select the second element of the resulting array. Like this:

function getNum(element){
    return element.getAttribute("id").split("_")[1];
}

The split() method turns a string into an array based on the character you specify, and we use [1] to specify that we want the second (numbering starts at 0) element of that array, which is the numeral you want. However, be careful because the value returned is a string, not a number. Use parseInt() if you want a number not a string.

Upvotes: 2

T00rk
T00rk

Reputation: 2297

function getNum(element)
{
    var elemId = element.attr("id");

    var fIndex = elemId.indexOf('_');
    var lIndex = elemId.lastIndexOf('_');

    return elemId.substring(fIndex  + 1, lIndex);
}

OR

function getNum(element)
{
    var r = new RegExp(/item_([0-9]+)_dish/); 
    if(r.test(element.attr("id")) === true)
    {
         return (r.exec(element.attr("id"))[1]);
    }
}

Upvotes: 1

laruiss
laruiss

Reputation: 3816

Although I would recommend the @DrewNoakes implementation idea (use data attributes), this should work:

function getNum(id){
      var num = id.replace(/.*_(\d+)_.*/, '$1');
      return num;
}

function updateDish(field) { // field is an HTMLElement, not a jQuery object
      var num = getNum(field.id);
     //Rest of function ...
     console.log("Number = " + num);// 1, 2, 3
}

Upvotes: 1

Magicprog.fr
Magicprog.fr

Reputation: 4100

You can parse your string to get only the number after removing the prefix:

var num = parseInt(element.attr("id").substring((prefix.length)));

JSFIDDLE: http://jsfiddle.net/ghorg12110/vacxgomh/1/

Upvotes: 3

Related Questions