Jquery Vs JavaScript - Get elements by class name

getElementsByClassName JavaScript and Jquery example

  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Jquery Vs Javascript...codesstore.blogspot.com</title>  
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>  
  7. <script type="text/javascript">  
  8.   
  9. //-------------Jquery hide divs---------------------  
  10.     $(document).ready(function(){  
  11.         $("#jquery-hide").click(function(){  
  12.             $(".hideme").hide();  
  13.         });  
  14.     });  
  15.       
  16. //-------------JavaScript hide divs------------------  
  17.   
  18. function hideAll(){  
  19.       
  20.     var divs=document.getElementsByClassName("hideme");  
  21.     for(var i=0;i<divs.length;i++){  
  22.         divs[i].style.display="none";  
  23.           
  24.     }  
  25.       
  26. }  
  27.   
  28. //fixes for IE  
  29. onload=function(){  
  30.     if (document.getElementsByClassName == undefined) {  
  31.         document.getElementsByClassName = function(className)  
  32.         {  
  33.             var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");  
  34.             var allElements = document.getElementsByTagName("*");  
  35.             var results = [];  
  36.             var element;  
  37.             for (var i = 0; (element = allElements[i]) != null; i++) {  
  38.                 var elementelementClass = element.className;  
  39.                 if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))  
  40.                     results.push(element);  
  41.             }  
  42.             return results;  
  43.         }  
  44.     }  
  45. }  
  46.       
  47.       
  48. </script>  
  49. </head>  
  50. <body>  
  51.   
  52.     <div class="hideme">  
  53.         Content 1  
  54.     </div>  
  55.       
  56.     <div class="hideme">  
  57.         Content 2  
  58.     </div>  
  59.       
  60.     <a href="#" id="jquery-hide">Jquery Hide</a>  
  61.     <a href="javascript:hideAll()" id="js-hide">Javascript Hide</a>  
  62.       
  63. </body>  
  64. </html>  

When using javascript getElementsByClassName not working on IE.I found fixes for IE from a forum...

No comments:

Post a Comment