How can I improve jQuery code performance?

Question

I have the following jquery lines to calculate how many characters are left in 4 different textarea fields:

$(window).load(function () { $('#submission1').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters1').text(1500 - len); }); $('#submission2').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters2').text(1500 - len); }); $('#submission3').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters3').text(1500 - len); }); $('#submission4').keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters4').text(1500 - len); }); }); 

They work fine, but is there a way to make them more efficient?

Greetings.

Answer 1

How about this?

 $(window).load(function () { $('#submission1, #submission2, #submission3, #submission4').keyup(function() { var len = $(this).val().length; if (len > 1500) { $(this).val($(this).val().substring(0, 1500)); } $('#countCharacters' + $(this).attr('id').slice(-1)).text(1500 - len); }).keyup(); }); 

This can be simplified even if you have a common class in your text areas, and we can avoid manipulating identifiers at the end, you will give us a little more information about the HTML layout - in particular, how the #countCharacters elements are located in the DOM relative to text fields.

An ideal solution would look something like this:

 $(window).load(function () { $('.editors').keyup(function() { var len = $(this).val().length; if (len > 1500) { $(this).val($(this).val().substring(0, 1500)); } $(this).next('.count').text(1500 - len); }).keyup(); }); 

This requires that your text fields have the editors class, and the count elements have the class count and are located immediately after their respective text areas. A similar solution could be developed regardless of where the elements of the account are actually located.

Update

Based on this HTML that you included in the comment:

 <div class="field"> <textarea name="submission1" class="editors" id="submission1" style="width: 680px"><?=$writtenSubmission1;?></textarea> </div> <p align="right"> <span id="countCharacters1" class="count" style="font-weight:bold">1500</span> characters left </p> 

The string text() should change to the following:

 $(this).closest('.field').next().find('.count').text(1500 - len); 

Basically, you just move the DOM tree to get the correct .count element from the textarea $(this) element. See jQuery docs for more information on the features that are available to help you navigate the DOM.

I also made one more minor change above, to run the keyup() function immediately after attaching the event handler to it, to show the correct amount immediately after loading the page.

In this script you can see the working version with your HTML: http://jsfiddle.net/tXArh/

Answer 2

Yes,

 function countChars(index){ var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters' + index).text(1500 - len); } $(window).load(function () { $('#submission1').keyup(function() { countChars.call(this, 1); }); $('#submission2').keyup(function() { countChars.call(this, 2); }); $('#submission3').keyup(function() { countChars.call(this, 3); }); $('#submission4').keyup(function() { countChars.call(this, 4); }); }); 

Answer 3

provide a class "text area" for each text field, then

 $(window).load(function () { $('.text-area').keyup(function() { var index = $(this).attr('alt'); var len = $(this).val().length; if (len >=1500) { $(this).val($(this).val().substring(0, 1500)); } $('#countCharacters' + index).text(1500 - len); }); }); 

give the first text fields alt = '1' and how wise

Answer 4

Give each text space a common css class (e.g. submission ). Then use the data attributes in the text areas to specify the max. the number of valid characters and the identifier of the item that shows the number of characters remaining:

 <textarea id="submission1" class="submission" data-maxchars="1500" data-remaining="remaining1"> </textarea> <span id="remaining1"></span> chars left. 

This allows you to simplify and generalize your jquery code as follows:

 $(window).load(function(){ $('.submission').keyup(function() { var $ta = $(this); var max = $ta.data('maxchars'); var len = $ta.val().length; if (len >= max) { $ta.val($ta.val().substring(0, max)); len = max; } $('#' + $(this).data('remaining')).text(max - len); }); }); 

See this jsfiddle for a working example.

Answer 5

I think you can use jQuery for each function:

  $.each( [1,2,3,4], function(i, n){ // i = position, n = value $('#submission'+n).keyup(function() { var len = this.value.length; if (len >=1500) { this.value = this.value.substring(0, 1500); } $('#countCharacters'+n).text(1500 - len); }); });