Цикл JQuery для нескольких элементов одного и того же класса CSS

Question

У меня есть несколько полей того же класса. Количество слов отображается правильно, но изменяется значение каждого слова, когда одно поле получает вход. Кроме того, я ожидаю, что в поле будет указано количество слов 100, если вход не существует, но он показывает 0. Предложения по улучшению кода ниже?

jQuery(document).ready(function() { 
//Text area 100 word limit 
jQuery('.100_wordCount').text("Word Count: 100"); 
    jQuery(".100_word_limit").on('keyup', function() { 
     var words = this.value.match(/\S+/g).length; 
     if (words > 100) { 
      // Split the string on first 100 words and rejoin on spaces 
      var trimmed = jQuery(this).val().split(/\s+/, 100).join(" "); 
      // Add a space at the end to keep new typing making new words 
      jQuery(this).val(trimmed + " "); 
     }else if(words < 0){ 
      jQuery('.100_wordCount').text("Word Count: 100"); 
     }else{ 
      var wordsLeft = 100-words; 
      jQuery('.100_wordCount').text("Word Count: " + wordsLeft); 
     } 
    }); 
}); 

Answer 1

Я бы обернуть каждый + текстовое количество слов (например, в DIV), и в случае KeyUp найти другой дочерний тег на основе общего родительского элемента.

Этот пример просто захватывает непосредственного родителя, но вы можете сделать это на основе общего предка или его имени класса.

например. http://jsfiddle.net/mzqo2ruk/

Html:

<div> 
    <textarea class="100_word_limit"></textarea> 
    <p class="100_wordCount"></p> 
</div> 

Javascript:

jQuery(document).ready(function() { 
//Text area 100 word limit 
jQuery('.100_wordCount').text("Word Count: 100"); 
jQuery(".100_word_limit").on('keyup', function() { 
     var words = this.value.match(/\S+/g).length; 
     if (words > 100) { 
      // Split the string on first 100 words and rejoin on spaces 
      var trimmed = jQuery(this).val().split(/\s+/, 100).join(" "); 
      // Add a space at the end to keep new typing making new words 
      jQuery(this).val(trimmed + " "); 
     }else if(words < 0){ 
      jQuery(this).parent().find('.100_wordCount').text("Word Count: 100"); 
     }else{ 
      var wordsLeft = 100-words; 
      jQuery(this).parent().find('.100_wordCount').text("Word Count: " + wordsLeft); 
     } 
    }); 
});