IntroductionIn this snippet, I will show how to make all elements in array to UpperCase using JQuery. Recently I have published an article for display subcategories using JQuery AJAX with dropdown list, if you are aware of this, you can read here. So today I planned to display all sub categories in Uppercase too. But I’m not going to modify any server side code or Sql script to archive this features in existing application. So I decide to use the JQuery and done it. I would share that with you here. ImplementationLet’s create simple web application with one page. The page has a div to print final result.Now add following code in order to implement. Html Code <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>How to Convert Array Elements to UpperCase using JQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function ()
{
var larrays=["C#","asp.net","vb.net","sql server","sharepoint"];
larrays=$.map(larrays, function(n)
{
return(n.toUpperCase());
});
$('#main').html(larrays.join("</br>"));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
</div>
</form>
</body>
</html>As usual I have added Jquery libaray from Google. And then next script block within the document ready event, has declared a simple array with five elements.
Then use the .map() function to collect each item with changes into new array and then callback function to process each element. I have give Below .map() function details reference. map(): http://api.jquery.com/jQuery.map/ Finally append all item from the array into the div with each item has break. Now run application and see output as like below. Each item now is in UpperCase. let's say make it lower case.just change the code as like below. <script language="javascript">
$(document).ready(function ()
{
var larrays=["C#","asp.net","vb.net","sql server","sharepoint"];
larrays=$.map(larrays, function(n,i)
{
return(i+1+"-"+n.toLowerCase());
});
$('#main').html(larrays.join("</br>"));
});
</script>One more additional features, let’s say you want to print each item with a sequence number. So you have to modify only on the callback function argument.
Javascript <script language="javascript">
$(document).ready(function ()
{
var larrays=["C#","asp.net","vb.net","sql server","sharepoint"];
larrays=$.map(larrays, function(n,i)
{
return(i+1+"-"+n.toUpperCase());
});
$('#main').html(larrays.join("</br>"));
});
</script>Now run and see the output. That's all.Hopes help. |