Finding elements with dynamic Id

Question

I want to make a generic function in jquery for select all functionality. I have a tabbed view in my web page.

Id of my component is : tabId:someDynamicId:rowId:componentId where, someDynamicId is dynamically generated.

So in jquery i want to find the element whose id starts with - tabId:someDynamicId & ends with componentId. And, tabId, someDynamicId & componentId would be passed as an argument to the generic function where this element needs to be find.

score 9 · Accepted Answer · edited May 23 '17 at 12:24

It's simple:

$('[id^=tabId][id$=componentId]').each(function(){
    var id = $(this).attr('id'); // tabId:someDynamicId:rowId:componentId
    var list = id.split(':');

    console.log(list[0]); // tabId
    console.log(list[1]); // someDynamicId
    console.log(list[2]); // rowId
    console.log(list[3]); // componentId
})

Wildcards in jQuery selectors

But i'm recommending to use right tools for this job. ID's are useful for finding specific element, but in your case it's better to use one or two classes and data attributes. For example:

<div class="tabs" data-component-id="x" data-tab-id="y">

Then find all $('.tabs') elements and use $(this).data('component-id') and $(this).data('tab-id')

$('.tabs').each(function(){
    var component_id = $(this).data('component-id');
    var tab_id = $(this).data('tab-id');
});

Update:

There is example of using this as function:

function(tabId,componentId) {
    $('[id^='+tabId+'][id$='+componentId+']').each(function(){
        var id = $(this).attr('id'); // tabId:someDynamicId:rowId:componentId
        var list = id.split(':');

        console.log(list[0]); // tabId
        console.log(list[1]); // someDynamicId
        console.log(list[2]); // rowId
        console.log(list[3]); // componentId
    })  
}

elclanrs · Answer 2 · 2012-03-30T05:40:16.653

2

You can do this with regex and filter(). Something like this should work. This particular example looks for an id that starts with "one" followed by a number and ending in "two". Check example http://jsfiddle.net/5eXm4/.

$.fn.regexFindId = function(re){
    return this.filter(function(){
        var id = this.id;
        return id.match(re);
    });
};

EDIT: You can use variables in regex just declare them like this:

var re = new RegExp(myVar);

edited Mar 30 '12 at 05:40

answered Mar 30 '12 at 05:28

elclanrs

92,861
21
134
171

Good one bro but i want to use variables . I can't hard code my function as in regex because in my case i don't know that id will start with one or two or three . So how to do that ??? Please reply. – Tarun Madaan Mar 30 '12 at 05:35
You'll have to extract a pattern from your ids and match against that. How does a typical component id look like? Also see edit – elclanrs Mar 30 '12 at 05:38

score 1 · Answer 3 · answered Mar 30 '12 at 06:26

1

 function( tableid, dynamicid, componentid)
   {
     a  = tableid+dynamicid ;    
     $( " [id^="+a+"][id$="+componentid+"] "). each(function()
     {
                  // do ur stuff
     }
    );
  }

answered Mar 30 '12 at 06:26

abhi

337
1
7
12

Finding elements with dynamic Id

3 Answers3