How to find all image input in a container class and How to replace title string of each image (Replace '$' with '-') using Jquery?
We can find all image input inside a container class using Jquery .each() function and Replace/Update title string of using Jquery .replace() function.

What is .each() Method in Jquery?
This is Jquery library function. The Jquery library provides a method, Each(), which will loop through each element of the target element (Object). Using this function we can get all value of each element inside the a container eg. class, tag, id etc. Very useful for multi element DOM manipulation, looping arrays and object properties.

Jquery Code
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. //Find all image input inside 'ContainerToolbar' class
  4. var count = 0;
  5. $('.ContainerToolbar input[type=image').each(function () {
  6. var allimg = $(this).attr("title");//Get title of image
  7. $(this).attr("title", allimg.replace(/\$/g, "_"))//Replace all '$' with '_' in title string.
  8. count++;//Counting image input inside the 'ContainerToolbar' class
  9. });
  10. alert(count);//Alert displaying total count.
  11. });
  12. </script>
HTML Code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Jquery Demo</title>
  5. <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function () {
  8. //Find all image input inside 'ContainerToolbar' class
  9. var count = 0;
  10. $('.ContainerToolbar input[type=image').each(function () {
  11. var allimg = $(this).attr("title"); // Get title of image
  12. $(this).attr("title", allimg.replace(/\$/g, "_")) //Replace all '$' with '_' in title string.
  13. count++; //Counting image input inside the 'ContainerToolbar' class
  14. });
  15. alert(count); //Alert displaying total count.
  16. });
  17. </script>
  18. </head>
  19. <body>
  20. <div id="ContainerToolbar" class="ContainerToolbar" style="background-image: url(../Skins/Custom/Background.gif);">
  21. <table id="ContainerToolbarGroup" class="ContainerToolbarGroup" cellpadding="0" cellspacing="0"
  22. style="float: left;">
  23. <tbody>
  24. <tr>
  25. <td unselectable="on">
  26. <div id="NavigateBack" title="Navigate back">
  27. <table id="NavigateBack_Button" class="DisabledButton" cellspacing="0" cellpadding="0"
  28. border="0" style="border-collapse: collapse;">
  29. <tbody>
  30. <tr>
  31. <td class="ImageButtonCell" unselectable="on">
  32. <input type="image" name="NavigateBack$ctl00" title="Navi$gate$Back" class="Enabled"
  33. src="../Skins/Custom/NavBack.png" onclick="return false;" style="border-width: 0px;"
  34. id="NavigateBack_ctl00">
  35. <input type="image" name="NavigateBack$ctl01" title="Navi$gate$Back" class="Disabled"
  36. src="../Skins/Custom/NavBackDisabled.png" onclick="return false;" style="border-width: 0px;"
  37. id="NavigateBack_ctl01">
  38. </td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. </div>
  43. </td>
  44. <td width="5px" unselectable="on">
  46. </td>
  47. <td unselectable="on">
  48. <div id="NavigateForward" title="Navigate forward">
  49. <table id="NavigateForward_Button" class="DisabledButton" cellspacing="0" cellpadding="0"
  50. border="0" style="border-collapse: collapse;">
  51. <tbody>
  52. <tr>
  53. <td class="ImageButtonCell" unselectable="on">
  54. <input type="image" name="NavigateForward$ctl00" title="$Navigate$Forward$" class="Enabled"
  55. src="../Skins/Custom/NavForward.png" onclick="return false;" style="border-width: 0px;"
  56. id="NavigateForward_ctl00">
  57. <input type="image" name="NavigateForward$ctl01" title="$Navigate$Forward$" class="Disabled"
  58. src="../Skins/Custom/NavForwardDisabled.png" onclick="return false;" style="border-width: 0px;"
  59. id="NavigateForward_ctl01">
  60. </td>
  61. </tr>
  62. </tbody>
  63. </table>
  64. </div>
  65. </td>
  66. </tr>
  67. </tbody>
  68. </table>
  69. </div>
  70. </body>
  71. </html>
Input Image Default Title
  1. Eg. title="$Navigate$Forward$"
Input Image Title After Page Render (After Calling Jquery)
  1. Eg. title="_Navigate_Forward_"