通过ID获取Div，并且Div的ID包含多个值jquery

Question

I have a Div element on my HTML page, and that DIV is coming from an ASP.NET application, so the DIV ID is changing all the time but few words remain the same in that id.

For example:

<div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid"> </div>

The only things which remains same all the time in above example are "_UWT" & "_NewGrid".

I know how to get the by Exact ID or atleast by using the 1 word in this: $( "div[id$='_UWT']" )

But I need to get this Div element by using the multiple parameters: I need to check the "_UWT" and "_NewGrid" also. If both words exist in the Div id, then return me the element only.

I need to get this DIV by JQuery. I know I can set the ClientID to Static from ASP.NET, but that is not doable in my case. Thanks.

Answer 1

One way could be:

$('div').each(function() {
if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) {
console.log($('div').attr('id'));
$(this).css('color','red') // do whatever you want with div
}
})

Demo:

 $('div').each(function() { if($(this).attr('id').includes('_NewGrid') && $(this).attr('id').includes('_UWT')) { console.log($('div').attr('id')); $(this).css('color','red') } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04 _NewGrid">11111</div> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04 _NewGri">222222222</div> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__ctl01_ctl00_ctl04 _NewGrid">3333333333333</div> 

Answer 2

To achieve this you can combine the 'attribute contains' selector (to find the _UWT ) and the 'attribute ends with' selector (to find the _WebGrid ), like this:

 $('div[id*="UWT"][id$="_NewGrid"]').addClass('foo'); 

 .foo { color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04_NewGrid">Not this one</div> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Not this one</div> <div id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04_NewGrid">This one</div> 

Answer 3

Try following way:

Add specific class I added here item-collection :

<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04
_NewGrid">Div 1</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00__UWT_ctl01_ctl00_ctl04">Div 2</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 3</div>
<div class="item-collection" id="ctl00_ctl00_MainContent_DetailBody_ctl01_ctl02_ctl00_ctl01_ctl00_ctl04
_NewGrid">Div 4</div>

JS is:

    var itemslist = [];
    $(".item-collection").each(function(){
        if($(this).attr("id").indexOf("_UWT") > -1 && $(this).attr("id").indexOf("_NewGrid")){
            itemslist.push($(this))
        }
    })      
    console.log(itemslist);