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
Input Image Default Title
Eg. title="$Navigate$Forward$"
Input Image Title After Page Render (After Calling Jquery)
Eg. title="_Navigate_Forward_"
Display Count In Alert()
-Method-Jquery.png)
Output With Updated Image Title
-Jquery-OutPut.png)
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
<script type="text/javascript"> $(document).ready(function () { //Find all image input inside 'ContainerToolbar' class var count = 0; $('.ContainerToolbar input[type=image').each(function () { var allimg = $(this).attr("title");//Get title of image $(this).attr("title", allimg.replace(/\$/g, "_"))//Replace all '$' with '_' in title string. count++;//Counting image input inside the 'ContainerToolbar' class }); alert(count);//Alert displaying total count. }); </script>
HTML Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery Demo</title> <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //Find all image input inside 'ContainerToolbar' class var count = 0; $('.ContainerToolbar input[type=image').each(function () { var allimg = $(this).attr("title"); // Get title of image $(this).attr("title", allimg.replace(/\$/g, "_")) //Replace all '$' with '_' in title string. count++; //Counting image input inside the 'ContainerToolbar' class }); alert(count); //Alert displaying total count. }); </script> </head> <body> <div id="ContainerToolbar" class="ContainerToolbar" style="background-image: url(../Skins/Custom/Background.gif);"> <table id="ContainerToolbarGroup" class="ContainerToolbarGroup" cellpadding="0" cellspacing="0" style="float: left;"> <tbody> <tr> <td unselectable="on"> <div id="NavigateBack" title="Navigate back"> <table id="NavigateBack_Button" class="DisabledButton" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;"> <tbody> <tr> <td class="ImageButtonCell" unselectable="on"> <input type="image" name="NavigateBack$ctl00" title="Navi$gate$Back" class="Enabled" src="../Skins/Custom/NavBack.png" onclick="return false;" style="border-width: 0px;" id="NavigateBack_ctl00"> <input type="image" name="NavigateBack$ctl01" title="Navi$gate$Back" class="Disabled" src="../Skins/Custom/NavBackDisabled.png" onclick="return false;" style="border-width: 0px;" id="NavigateBack_ctl01"> </td> </tr> </tbody> </table> </div> </td> <td width="5px" unselectable="on"> </td> <td unselectable="on"> <div id="NavigateForward" title="Navigate forward"> <table id="NavigateForward_Button" class="DisabledButton" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;"> <tbody> <tr> <td class="ImageButtonCell" unselectable="on"> <input type="image" name="NavigateForward$ctl00" title="$Navigate$Forward$" class="Enabled" src="../Skins/Custom/NavForward.png" onclick="return false;" style="border-width: 0px;" id="NavigateForward_ctl00"> <input type="image" name="NavigateForward$ctl01" title="$Navigate$Forward$" class="Disabled" src="../Skins/Custom/NavForwardDisabled.png" onclick="return false;" style="border-width: 0px;" id="NavigateForward_ctl01"> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div> </body> </html>
Input Image Default Title
Eg. title="$Navigate$Forward$"
Input Image Title After Page Render (After Calling Jquery)
Eg. title="_Navigate_Forward_"
Display Count In Alert()
Output With Updated Image Title
0 comments:
Post a Comment