Цикл 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);
        }
    });
});