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

Khumana Ram
9y
2.9k
0
1
25
Blog

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

<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>