Question

I’ve written the JQuery below, and have had to search for items in the DOM using multiple calls to .parent() because the ClientIDs rendered in ASP.Net are built up dynamically in the html. I’m aware that this will cause problems each time we change the markup code, and would like to see if anyone knows of a better way to do this in ASP.Net.

<script language='jquery' src='js/jquery-1.3.2-vsdoc2.js' type='text/javascript'> </script> <script src='js/jquery.color.js' type='text/javascript'> </script> script language='javascript' type='text/javascript'>     $(document).ready(function() {      //Get the cost of the base item, then add the cost of the selected compoents as      //they get selected.         $('.AspNet-CheckBoxList > ul > li > input').click(function() {          var itemCost = 0;          $(this).find('fieldset:div:span');          itemCost =  GetItemCost($(this).parent().parent().parent().parent()         .parent().parent().parent().children().find('span').text());         var Component = $(this).next('label').text();          if ($(this).attr('checked') == true) {             itemCost = (itemCost + GetItemCost(Component)).toFixed(2);                        }         else {             itemCost = (itemCost - GetItemCost(Component)).toFixed(2);         }          $(this).parent().parent().parent().parent().parent()         .parent().parent().children().find('span').text('$' + itemCost);         $(this).parent().parent().parent().parent().parent()         .parent().parent().children().find('span').animate(          { backgroundColor: '#FFFF66' }, 300)          .animate({ backgroundColor: 'white' }, 750);       });     });  function GetItemCost(text) {     var start = 0;     start = text.lastIndexOf('$');      var itemCost = text.substring(start + 1);             var pattern = /,/g;     itemCost = itemCost.replace(pattern, '');             return Number(itemCost); } </script> 

Here is some of the html copied from the source of the rendered page

<fieldset id='ctl00_ContentPlaceHolder1_ctl00_FieldSet' class='parent'> <legend> </legend> <a id='ctl00_ContentPlaceHolder1_ctl00_ImgLink' class='imgcontainer'> </a> <div> <input id='ctl00_ContentPlaceHolder1_ctl00_RemoveCartItem' type='image'      alt='Remove Item' src='img/buttons/remove_4c.gif'      name='ctl00$ContentPlaceHolder1$ctl00$RemoveCartItem'/> <span id='ctl00_ContentPlaceHolder1_ctl00_TotalItemCost'>$315.96</span> </div> <ol id='ctl00_ContentPlaceHolder1_ctl00_InputList'> <li class='pt'> <label id='ctl00_ContentPlaceHolder1_ctl00_ProjectLabel'    for='ctl00_ContentPlaceHolder1_ctl00_ProjectValue'>Project</label> <input id='ctl00_ContentPlaceHolder1_ctl00_ProjectValue' type='text'   name='ctl00$ContentPlaceHolder1$ctl00$ProjectValue'/> </li> <li class='pt'> <label id='ctl00_ContentPlaceHolder1_ctl00_TaskLabel'     for='ctl00_ContentPlaceHolder1_ctl00_TaskValue'>Task</label> <input id='ctl00_ContentPlaceHolder1_ctl00_TaskValue' type='text'   name='ctl00$ContentPlaceHolder1$ctl00$TaskValue'/> </li> <li id='ctl00_ContentPlaceHolder1_ctl00_ComponentsLI'> <span>Specify</span> <fieldset id='ctl00_ContentPlaceHolder1_ctl00_ComponentsFieldSet'   class='fieldsetlist'> <legend>Software Components</legend> <div id='ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList' class='AspNet-  CheckBoxList'> <ul class='AspNet-CheckBoxList-RepeatDirection-Vertical'> <li class='AspNet-CheckBoxList-Item'> <input id='ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0'   type='checkbox' value='2305'      name='ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$0'/> <label for='ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0'>Another   Cool Component $1,000.00</label> </li> <li class='AspNet-CheckBoxList-Item'> <input id='ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1'   type='checkbox' value='2306'    name='ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$1'/> <label for='ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1'>Software    Assurance $274.89</label> </li> </ul> </div> </fieldset> </li> </ol> </fieldset> 

Answer 1

You can use the attribute ends with selector:

$('tag[id$='ServerSideId']')  

Where ServerSideId is the id used on server side.

For example to select:

<li id='ctl00_ContentPlaceHolder1_ctl00_ComponentsLI'> 

Use:

$('li[id$='ComponentsLI']')