How to find all image input in a container class and How to replace title string of each image (Replace '$' with '-') using Jquery?

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">  
  45.                            
  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_"  
Ebook Download
View all
Learn
View all