code optimize

codelevel used Ask the Experts™

on 2015-07-31

jQuery

my javascript variable declaration looks redundant.
can you please optimize it, so that i can have any number of ids and a generic function for that?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function() {
    var text = $('#first').text();
    var wordsCount = text.split(' ').length;
    $('#firstCount').html('words count: ' + wordsCount  );	
	var text = $('#second').text();
    var wordsCount = text.split(' ').length;
    $('#secondCount').html('words count: ' + wordsCount  );
});
//]]>  
</script>
</head>
<body>
<div id="firstCount"></div>
<div  id="first">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, </p>
</div>
<div id="second">
<div id="secondCount"></div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</body>
</html>

Open in new window

Please have a look optimized code with generic word counter!

I used "content" class to indicate that these div(s) have the contents, and "wordCount" class in just before/previous div to indicate word count is to be shown here!!

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function() {
	$('div.content').each(function(){ 
	   var wordCount = $(this).text().split(' ').length;
	   $(this).prev('div.wordCount').html('words count: ' + wordCount);
	});
});
//]]>  
</script>
</head>
<body>
<div class="wordCount"></div>
<div class="content">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, </p>
</div>

<div class="wordCount"></div>
<div class="content">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>

<div class="wordCount"></div>
<div class="content">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, as da;d asd;asd a;da sd;a dsdlflsfdlgldfg dflgd fgldfg dflgd gldfg dlfg dfgldf gldfg dfgld gsdfsf!!</p>
</div>

<!-- same way put more div with respective class -->

</body>
</html>

Open in new window

code optimize

Premium Content

Premium Content

Explore our Suite of Services